bccf4bbfbd
## 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>
|
||
|---|---|---|
| .. | ||
| src | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsup.config.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.
@tailwindcss/postcss plugin API
Changing where the plugin searches for source files
You can use the base option (defaults to the current working directory) to change the directory in which the plugin searches for source files:
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
base: path.resolve(__dirname, './path'),
}),
],
}
Enabling or disabling Lightning CSS
By default, this plugin detects whether or not the CSS is being built for production by checking the NODE_ENV environment variable. When building for production Lightning CSS will be enabled otherwise it is disabled.
If you want to always enable or disable Lightning CSS the optimize option may be used:
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
// Enable or disable Lightning CSS
optimize: false,
}),
],
}
It's also possible to keep Lightning CSS enabled but disable minification:
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
optimize: { minify: false },
}),
],
}
Enabling or disabling url(…) rewriting
Our PostCSS plugin can rewrite url(…)s for you since it also handles @import (no postcss-import is needed). This feature is enabled by default.
In some situations the bundler or framework you're using may provide this feature itself. In this case you can set transformAssetUrls to false to disable this feature:
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
// Disable `url(…)` rewriting
transformAssetUrls: false,
// Enable `url(…)` rewriting (the default)
transformAssetUrls: true,
}),
],
}
You may also pass options to optimize to enable Lighting CSS but prevent minification:
import tailwindcss from '@tailwindcss/postcss'
export default {
plugins: [
tailwindcss({
// Enables Lightning CSS but disables minification
optimize: { minify: false },
}),
],
}