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.

Install:

npm install vite-plugin-windicss windicss

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

// 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"]
      }
    })
  ]
}

⚠ Make sure that all your files are included in scan.dirs.

These options can also be defined in windi.config.js.

Import virtual:windi.css in _default.page.client.js.

// renderer/_default.page.client.js

import 'virtual:windi.css'

// ...