Vite Plugin

vite-plugin-galeforcecss integrates GaleforceCSS into Vite's dev server and build pipeline.

Installation

npm install -D vite-plugin-galeforcecss

Configuration

// vite.config.js
import { defineConfig } from 'vite'
import galeforcecss from 'vite-plugin-galeforcecss'

export default defineConfig({
  plugins: [
    galeforcecss({
      config: 'tailwind.config.js',
      content: ['src'],
    }),
  ],
})

Options

Option	Type	Default	Description
input	string	'src/index.css'	CSS entry for virtual-module mode.
config	string	auto	tailwind.config.{js,cjs,mjs,ts}.
content	string[]	from config	Scan roots. Re-scanned on change.
minify	boolean	from Vite	Defaults to build.cssMinify.
sourceMap	boolean	from Vite	Defaults to build.sourcemap.
targets	object	none	Lightning CSS browser targets.
virtualId	string	'virtual:galeforcecss.css'	Virtual module name.

Drop-in vs virtual-module mode

Drop-in (default). Acts as a PostCSS plugin inside Vite's CSS pipeline. Your existing @tailwind directives in any .css / .scss / .sass / .less file are processed transparently. No app-side changes.

Virtual-module. Set input and import the virtual module in your entry:

import 'virtual:galeforcecss.css'

Use this when you want a single plugin-owned stylesheet.

HMR behaviour

Change	What happens
Content file	Single-file scan → candidate diff → selective recompile → reload if CSS changed.
@tailwind / @layer entry	Full recompile → reload if CSS changed.
tailwind.config.js	Config cache cleared → full recompile → reload if CSS changed.
No-op edit	No recompile, no reload.

Vite versions

5.x, 6.x, 7.x, 8.x. Uses server.hot.send with server.ws.send fallback.