⚠
vite-plugin-ssr has been renamed Vike, see migration guide.

Windi CSS

To use vite-plugin-ssr with Windi CSS:

  1. Install:

    npm install vite-plugin-windicss windicss
  2. 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.

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

    // renderer/_default.page.client.js
    
    import 'virtual:windi.css'
    
    // ...

See also

Example

Example of using vite-plugin-ssr with Windi CSS: