wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/packages/@tailwindcss-webpack/package.json

56 lines
1.2 KiB
JSON
Raw Normal View History

Add @tailwindcss/webpack loader for Tailwind CSS v4 (#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>
2026-01-29 15:16:31 +01:00
{
"name": "@tailwindcss/webpack",
4.3.4
2026-08-31 13:17:41 +02:00
"version": "4.3.4",
Add @tailwindcss/webpack loader for Tailwind CSS v4 (#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>
2026-01-29 15:16:31 +01:00
"description": "A webpack loader for Tailwind CSS v4.",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/tailwindcss.git",
"directory": "packages/@tailwindcss-webpack"
},
"bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
"homepage": "https://tailwindcss.com",
"scripts": {
"build": "tsup-node",
"dev": "pnpm run build -- --watch"
},
"files": [
"dist/"
],
"publishConfig": {
"provenance": true,
"access": "public"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
}
},
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"@tailwindcss/node": "workspace:*",
"@tailwindcss/oxide": "workspace:*",
"tailwindcss": "workspace:*"
},
"devDependencies": {
"@types/node": "catalog:",
"webpack": "catalog:"
},
"peerDependencies": {
Add Rspack optional peer dependency for @tailwindcss/webpack (#20027) ## Summary This PR makes Rspack support explicit for `@tailwindcss/webpack` by adding `@rspack/core` as an optional peer dependency alongside `webpack`. The loader already works through Rspack's webpack-compatible loader API, as shown in this runnable example: https://github.com/rstackjs/rstack-examples/tree/main/rspack/tailwindcss. The README and package description are updated to document that usage. ## Test plan No Rspack-specific tests were added. The loader implementation is unchanged, and the existing webpack loader tests exercise the same loader API path that Rspack uses, which should cover the relevant behavior. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2026-05-23 17:14:48 +08:00
"@rspack/core": "^1.0.0 || ^2.0.0",
"webpack": "^5.0.0"
},
"peerDependenciesMeta": {
"@rspack/core": {
"optional": true
},
"webpack": {
"optional": true
}
Add @tailwindcss/webpack loader for Tailwind CSS v4 (#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>
2026-01-29 15:16:31 +01:00
}
}
Reference in a new issue Copy permalink