Integration packages provide adapters that connect the Tailwind CSS v4 core engine to various build tools and development environments. These packages wrap the high-performance compilation engine (built on @tailwindcss/node and @tailwindcss/oxide) and handle environment-specific concerns such as Hot Module Replacement (HMR), caching strategies, file system watching, and asset URL rewriting.
For details on the core engine, see Core Architecture For the native components, see Native Module Architecture
The repository manages several integration packages, each targeting a specific build ecosystem or runtime environment:
| Package | Purpose | Primary Dependency |
|---|---|---|
@tailwindcss/vite | Vite plugin with HMR and module graph integration | @tailwindcss/node packages/@tailwindcss-node/package.json62 |
@tailwindcss/postcss | PostCSS plugin for generic toolchains | @tailwindcss/node packages/@tailwindcss-node/package.json62 |
@tailwindcss/webpack | Webpack loader for module-based builds | tailwindcss packages/@tailwindcss-webpack/package.json37-38 |
@tailwindcss/cli | Command-line interface for standalone builds | @tailwindcss/node packages/@tailwindcss-node/package.json62 |
@tailwindcss/standalone | Self-contained binary (no Node.js required) | @tailwindcss/cli packages/@tailwindcss-standalone/package.json29 |
@tailwindcss/browser | Browser-based runtime (CDN build) | tailwindcss packages/@tailwindcss-browser/package.json35 |
@tailwindcss/upgrade | CLI tool for migrating v3 projects to v4 | @tailwindcss/node packages/@tailwindcss-upgrade/package.json30 |
Sources: packages/@tailwindcss-standalone/package.json27-35 packages/@tailwindcss-upgrade/package.json29-46 packages/@tailwindcss-node/package.json55-63 packages/@tailwindcss-browser/package.json32-36 packages/@tailwindcss-webpack/package.json33-38
The integration layer serves as the bridge between "Natural Language Space" (user configuration and CSS files) and "Code Entity Space" (the Rust-powered compiler and scanner).
This diagram illustrates how high-level integration packages invoke the lower-level Node.js and Native layers.
Architecture Detail: Most integrations rely on @tailwindcss/node to provide the compile() function, which orchestrates the @tailwindcss/oxide Scanner for finding utility candidates and the core tailwindcss package for generating CSS. @tailwindcss/node also provides specialized loaders for ESM and CJS caching packages/@tailwindcss-node/package.json39-54
Sources: packages/@tailwindcss-node/package.json55-63 packages/@tailwindcss-webpack/package.json35-36 packages/@tailwindcss-upgrade/package.json30-31
The Vite plugin implements a strategy to handle different stages of the Vite lifecycle. It depends on @tailwindcss/node and @tailwindcss/oxide for the heavy lifting.
Users can control Lightning CSS optimizations via the optimize option:
NODE_ENV packages/@tailwindcss-vite/README.md42-45Sources: packages/@tailwindcss-vite/README.md40-77
The PostCSS plugin (@tailwindcss/postcss) is designed to be a drop-in replacement for tailwindcss in existing PostCSS pipelines.
@import natively, removing the need for postcss-import packages/@tailwindcss-postcss/README.md93url() paths in CSS files packages/@tailwindcss-postcss/README.md91-95@tailwindcss/node for compilation logic and uses optimize flags to control the pipeline packages/@tailwindcss-postcss/README.md58-89Sources: packages/@tailwindcss-postcss/README.md40-112
The @tailwindcss/webpack package provides a loader to integrate Tailwind CSS v4 into Webpack and Rspack environments packages/@tailwindcss-webpack/package.json43-46
The loader utilizes @tailwindcss/node and @tailwindcss/oxide to process CSS modules packages/@tailwindcss-webpack/package.json35-36 It exports both ESM and CommonJS versions for compatibility packages/@tailwindcss-webpack/package.json24-31 It also uses @alloc/quick-lru for internal caching packages/@tailwindcss-webpack/package.json34
Sources: packages/@tailwindcss-webpack/package.json1-56
@tailwindcss/cli)The CLI provides the primary interface for terminal-based builds. It relies on @tailwindcss/node for the core compilation logic packages/@tailwindcss-upgrade/package.json30
@tailwindcss/standalone)This package provides a self-contained binary built using bun packages/@tailwindcss-standalone/package.json16 It bundles the CLI and all necessary native dependencies for multiple platforms to ensure it can run without Node.js packages/@tailwindcss-standalone/package.json36
The standalone build includes specific watchers and optimizers for:
lightningcss binaries packages/@tailwindcss-standalone/package.json47-53Sources: packages/@tailwindcss-standalone/package.json1-55
The @tailwindcss/browser package provides a runtime version of Tailwind CSS. It is exported as a global script (index.global.js) intended for use in <script> tags packages/@tailwindcss-browser/package.json6-7 This version compiles CSS directly in the browser, making it ideal for prototyping.
Sources: packages/@tailwindcss-browser/package.json1-37
The @tailwindcss/upgrade package is a specialized integration designed to migrate projects from v3 to v4.
It leverages a sophisticated stack to analyze and transform code:
Sources: packages/@tailwindcss-upgrade/package.json29-46
All integrations follow a standardized pattern for connecting the user's environment to the core engine:
This diagram maps integration-level concepts to the specific code entities in the @tailwindcss/node and tailwindcss packages.
Sources: packages/@tailwindcss-node/package.json39-54 packages/@tailwindcss-node/package.json59 packages/@tailwindcss-node/package.json62
Refresh this wiki