React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

---

Tailwind CSS version lock (v3.3.5 fixed)

⚠️ Important: This project uses Tailwind CSS v3.3.5.
Do not upgrade to Tailwind v4. Doing so will cause PostCSS plugin errors and break the build.

Why?

Tailwind v4 separates its PostCSS plugin into @tailwindcss/postcss, which is incompatible with the current postcss.config.js.

If you see the following error:

[plugin:vite:css] [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin...

you’re accidentally using v4.

How to fix:

1. Uninstall all Tailwind packages:

npm uninstall tailwindcss @tailwindcss/postcss @tailwindcss/node

2. Reinstall Tailwind v3.3.5:

npm install [email protected]

3. Set your postcss.config.js to use the Tailwind plugin:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};