Tailwind CSS / Windi CSS

See Tailwind's Vite Installation Guide (the installation steps are the same for React).

Windi CSS

Alternatively, we can use Windi CSS for a more scalable solution.

1. Install:

   npm install vite-plugin-windicss windicss

   Or:

   yarn add vite-plugin-windicss windicss
   

2. Add vite-plugin-windicss to vite.config.js:

   import ssr from "vite-plugin-ssr/plugin"
   import WindiCSS from "vite-plugin-windicss"
   
   export default {
     plugins: [
       ssr(),
       WindiCSS({
         scan: {
           // By default only `src/` is scanned
           dirs: ["pages"],
           // We only have to specify the file extensions we actually use.
           fileExtensions: ["vue", "js", "ts", "jsx", "tsx", "html", "pug"]
         }
       })
     ]
   }

   Alternatively, we can define these options in windi.config.js.

3. Add WindiCSS to _default.page.client.js.

   import 'virtual:windi.css'

That's it.

More at WindiCSS Vite Guide.