Master CSS Engineering in Vite: Global Styles, Modules, Autoprefixer & Windi CSS

Background

Good CSS engineering enhances maintainability, reusability, automation, improves page load speed and performance, freeing effort for JavaScript logic.

Add Global Style File

Scenario: a SCSS/LESS file defines global variables needed across other style files; place these variables globally.

// vite.config.ts
// Global SCSS file path
const variablePath = path.resolve("./src/variable.scss");

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData will be injected at the top of every SCSS file
        additionalData: `@import "${variablePath}";`
      }
    }
  }
});

CSS Modules

Vite supports CSS Modules out of the box; files ending with .module are treated as modules. Example:

// index.tsx
import styles from './index.module.scss';
export function Header() {
  return <p className={styles.header}>This is Header</p>;
};

PostCSS Autoprefixer

Configure autoprefixer via Vite's PostCSS settings to add vendor prefixes automatically.

// Install autoprefixer
pnpm i autoprefixer -D

// vite.config.ts
export default {
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
};

CSS Atomic Framework (Windi CSS)

Windi CSS offers on‑demand atomic classes, faster than Tailwind in development mode. Install and configure it in Vite.

// Install
pnpm i windicss vite-plugin-windicss -D

// vite.config.ts
import windi from "vite-plugin-windicss";
export default {
  plugins: [
    // other plugins
    windi()
  ]
};

Import the generated stylesheet in src/main.tsx:

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

Example Header component using Windi CSS:

// 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>
  );
}

Windi CSS Attributify and Shortcuts

Enable attributify to write styles as element attributes, and define shortcuts for reusable class groups.

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

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

Using attributify:

<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 the shortcut:

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