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.

Edit this page