Master CSS Engineering in Vite: Global Styles, Modules, and Windi CSS

Background

Good CSS engineering improves maintainability, reuse, automation, and page‑load performance, allowing developers to focus on JavaScript logic.

Adding a Global Style File

When SCSS or LESS variables must be shared across many style files, place them in a single file (e.g., src/variable.scss) and inject it into every stylesheet via Vite’s additionalData option.

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

const variablePath = path.resolve('./src/variable.scss');

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Content is prepended to each SCSS file
        additionalData: `@import "${variablePath}";`
      }
    }
  }
});

CSS Modules

Vite treats files whose name ends with .module.scss (or .module.css) as CSS Modules. Import the generated object and apply class names as properties.

// src/components/Header/index.module.scss
.header {
  font-size: 1.5rem;
  color: #333;
}

// index.tsx
import styles from './index.module.scss';

export function Header() {
  return <p className={styles.header}>This is Header</p>;
}

PostCSS Autoprefixer

Install autoprefixer and configure it in vite.config.ts (or a separate postcss.config.js) to add vendor prefixes for the browsers listed in overrideBrowserslist.

pnpm add autoprefixer -D

// vite.config.ts
import autoprefixer from 'autoprefixer';
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Chrome > 40', 'Firefox > 31', 'IE 11']
        })
      ]
    }
  }
});

Windi CSS Atomic Framework

Windi CSS generates atomic utilities on demand, producing smaller bundles and faster builds than Tailwind v2. Install the core package and the Vite plugin, then enable the virtual stylesheet.

pnpm add windicss vite-plugin-windicss -D

// vite.config.ts
import { defineConfig } from 'vite';
import windi from 'vite-plugin-windicss';

export default defineConfig({
  plugins: [
    // other plugins …
    windi()
  ]
});

// src/main.tsx
import 'virtual:windi.css';

Example component using Windi utilities:

// src/components/Header/index.tsx
import { devDependencies } from '../../../package.json';

export function Header() {
  return (
    <div className="p-20px text-center">
      <h1 className="font-bold text-2xl mb-2">
        vite version: {devDependencies.vite}
      </h1>
    </div>
  );
}

Attributify and Shortcuts

Enable attributify to write styles as HTML attributes, and define shortcuts for reusable class groups in windi.config.ts.

// windi.config.ts
import { defineConfig } from 'vite-plugin-windicss';

export default defineConfig({
  attributify: true,
  shortcuts: {
    'flex-c': 'flex justify-center items-center'
  }
});

Attributify example:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Using a shortcut:

<div className="flex-c"></div>  <!-- expands to "flex justify-center items-center" -->