Skip to content

Commit bccf4bb

Browse files
Add @tailwindcss/webpack loader for Tailwind CSS v4 (tailwindlabs#19610)
## Summary This PR adds a new `@tailwindcss/webpack` package that provides a dedicated webpack loader for Tailwind CSS v4. This loader works with both standard webpack and Turbopack's webpack loader compatibility layer. ### Why a dedicated loader? The current webpack integration uses `postcss-loader` + `@tailwindcss/postcss`. While this works, a dedicated loader: - **Eliminates PostCSS as a middleman** - works directly with CSS strings (no AST conversions) - **Simpler and more efficient** - follows the same pattern as `@tailwindcss/vite` - **Better for Turbopack** - gives direct control over dependency reporting via webpack's loader API ### How it works The loader mirrors the Vite plugin's approach: 1. Uses `compile()` from `@tailwindcss/node` to parse CSS and resolve `@apply` directives 2. Uses `Scanner` from `@tailwindcss/oxide` to scan content files for utility candidates 3. Reports dependencies via `this.addDependency()` and `this.addContextDependency()` 4. Optionally optimizes output with Lightning CSS ### Usage ```javascript // webpack.config.js module.exports = { module: { rules: [ { test: /.css$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack', // No PostCSS needed! ], }, ], }, } ``` ### Options - `base` - The base directory to scan for class candidates (defaults to `process.cwd()`) - `optimize` - Whether to optimize/minify the output CSS (defaults to `true` in production) ### Files added - `packages/@tailwindcss-webpack/` - New package - `src/index.ts` - Main loader implementation - `src/index.cts` - CommonJS entry point for webpack compatibility - `package.json`, `tsconfig.json`, `tsup.config.ts`, `README.md` - `integrations/webpack/loader.test.ts` - Integration tests - `integrations/utils.ts` - Added webpack override for transitive dependencies ### Test plan - [x] Build test - verifies basic compilation - [x] Watch test - verifies HMR when adding new Tailwind classes - [x] `@apply` test - verifies `@apply` directives work correctly - [x] Optimization test - verifies minification works --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent 7971167 commit bccf4bb

12 files changed

Lines changed: 1286 additions & 15 deletions

File tree

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1919
### Added
2020

2121
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
22+
- Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
2223

2324
## [4.1.18] - 2025-12-11
2425

integrations/utils.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -498,6 +498,7 @@ async function overwriteVersionsInPackageJson(content: string): Promise<string>
498498
json.pnpm.overrides['@tailwindcss/cli>tailwindcss'] = resolveVersion(pkg)
499499
json.pnpm.overrides['@tailwindcss/postcss>tailwindcss'] = resolveVersion(pkg)
500500
json.pnpm.overrides['@tailwindcss/vite>tailwindcss'] = resolveVersion(pkg)
501+
json.pnpm.overrides['@tailwindcss/webpack>tailwindcss'] = resolveVersion(pkg)
501502
} else {
502503
json.pnpm.overrides[pkg] = resolveVersion(pkg)
503504
}

0 commit comments

Comments
 (0)