Vite Starter

Vite React starter project with TailwindCSS and TypeScript.

#react #tailwindcss #typescript #vite #template

Demo Download

Vite React Starter

Features

Setup

pnpm create vite@latest
pnpm install
pnpm install -D rimraf npm-run-all
pnpm install -D tailwindcss postcss autoprefixer @tailwindcss/forms
pnpm install -D giacomoferretti/postcss-color-rgb-tailwind
pnpm exec tailwindcss init -p

Add this to index.html in <head>

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Edit tailwind.config.js

/** @type {import("tailwindcss").Config} */

+const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
+   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
        extend: {
+           fontFamily: {
+               sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+           },
        },
    },
+   plugins: [require("@tailwindcss/forms")],
};

Edit src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html,
    body,
    #root {
        @apply h-full;
    }
}

Add postcss-color-rgb-tailwind to postcss.config.js

module.exports = {
    plugins: {
        "tailwindcss": {},
        "autoprefixer": {},
        "postcss-color-rgb-tailwind": {},
    },
};

pnpm install -D prettier @trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss

Create .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.{md,txt}]
indent_size = 4
trim_trailing_whitespace = false

Create prettier.config.cjs

module.exports = {
    plugins: [require("./plugins/prettier-tailwind-sort-fix/index.cjs")],
    bracketSameLine: true,
    quoteProps: "consistent",
    importOrder: ["^@/(.*)$", "^[./]"],
    importOrderSeparation: true,
    importOrderSortSpecifiers: true,
};

pnpm install -D vite-tsconfig-paths

Add custom paths to tsconfig.json

    "references": [{ "path": "./tsconfig.node.json" }],
+   "extends": "./tsconfig.paths.json"
}

Create tsconfig.paths.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

Edit vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
+    plugins: [react(), tsconfigPaths()],
});

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce