setup-vite-with-tailwinds.md

Setup a Vite/React/Tailwind project

Setup your Vite/React app

See https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest
# name      > {project-name}
# framework > React
# variant   > TypeScript + SWC

cd {project-name}
npm install
npm run dev

Setup Tailwind

See https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Edit index.css

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

Configure VSCode

Create .vscode/settings.json file

{
  "css.validate": false,
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.emmetCompletions": true,
  "editor.inlineSuggest.enabled": true,
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}