Use native @tailwindcss/webpack loader in preset-tailwindcss-4

packages/demo/package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "@studiometa/js-toolkit": "^3.0.0",
     "@studiometa/ui": "^0.2.54",
-    "tailwindcss": "^4.0.0",
+    "@studiometa/webpack-config-preset-tailwindcss-4": "*",
+    "tailwindcss": "^4.2.0",
     "vue": "^3.5.13"
   },
   "imports": {

packages/demo/src/css/app.scss → packages/demo/src/css/app.css

@@ -1,4 +1,4 @@
-@use 'tailwindcss';
+@import 'tailwindcss';
 
 body {
   min-height: 80vh;

packages/demo/src/js/app.ts

@@ -4,7 +4,10 @@ import { createApp as createVueApp } from 'vue';
 import VueComponent from './VueComponent.vue';
 import config from '#js/config.yaml';
 import configRaw from './config.yaml?raw';
+import configRaw2 from './config.txt' with { type: 'text' };
 
+
+console.log({ configRaw2, configRaw });
 /**
  * App class.
  * @license MIT © 2020 Studio Meta

packages/demo/src/js/config.txt

@@ -0,0 +1 @@
+log: true

packages/preset-tailwindcss-4/README.md

@@ -4,13 +4,15 @@
 
 A preset for [@studiometa/webpack-config](https://github.com/studiometa/webpack-config) to add Tailwind CSS v4 support to your project.
 
+Uses the native [`@tailwindcss/webpack`](https://www.npmjs.com/package/@tailwindcss/webpack) loader introduced in Tailwind CSS v4.2.0.
+
 ## Usage
 
-Install the package along with Tailwind CSS v4:
+Install the package along with Tailwind CSS v4.2+:
 
 ```sh
 npm install --save-dev @studiometa/webpack-config-preset-tailwindcss-4
-npm install --save tailwindcss@4
+npm install --save tailwindcss@^4.2.0
 ```
 
 And load the preset in the `meta.config.js` file:

packages/preset-tailwindcss-4/package.json

@@ -27,9 +27,9 @@
   },
   "homepage": "https://github.com/studiometa/webpack-config#readme",
   "peerDependencies": {
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.2.0"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "^4.0.0"
+    "@tailwindcss/webpack": "^4.2.0"
   }
 }

packages/preset-tailwindcss-4/src/index.d.ts

@@ -1,5 +1,4 @@
 import { Preset } from '@studiometa/webpack-config/presets';
 
-export interface TailwindCssOptions {}
 export { Preset }
-export function tailwindcss():Preset;
+export function tailwindcss(): Preset;

packages/preset-tailwindcss-4/src/index.js

@@ -1,4 +1,6 @@
-import tailwindcssPlugin from '@tailwindcss/postcss';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 /**
  * Tailwind CSS preset.
@@ -14,16 +16,21 @@ export function tailwindcss() {
             continue;
           }
 
-          for (const loader of rule.use) {
-            if (loader.loader === 'postcss-loader') {
-              loader.options.postcssOptions.plugins = [
-                tailwindcssPlugin({
-                  optimize: false,
-                }),
-                ...loader.options.postcssOptions.plugins,
-              ];
-            }
+          const postcssIndex = rule.use.findIndex(
+            (loader) => loader === 'postcss-loader' || loader?.loader === 'postcss-loader',
+          );
+
+          if (postcssIndex === -1) {
+            continue;
           }
+
+          rule.use[postcssIndex] = {
+            loader: require.resolve('@tailwindcss/webpack'),
+            options: {
+              base: config.context,
+              optimize: false,
+            },
+          };
         }
       });
     },

packages/webpack-config/package.json

@@ -69,7 +69,7 @@
     "sass-embedded": "^1.89.1",
     "sass-loader": "^16.0.5",
     "terser-webpack-plugin": "^5.3.14",
-    "webpack": "^5.99.9",
+    "webpack": "^5.102.0",
     "webpack-assets-manifest": "^6.1.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",