feat: add tailwindcss with CSS extract plugin example

chenjiahan · chenjiahan · commit 57b600c532c5 · 2026-02-24T15:27:35.000+08:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rspack/generate-package-json-webpack-plugin/package.json b/rspack/generate-package-json-webpack-plugin/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@rspack-example/generate-package-json-webpack-plugin_2",
+  "name": "@rspack-example/generate-package-json-webpack-plugin",
   "private": true,
   "scripts": {
     "build": "rspack build"
diff --git a/rspack/generate-package-json-webpack-plugin/rspack.config.js b/rspack/generate-package-json-webpack-plugin/rspack.config.js
diff --git a/rspack/generate-package-json-webpack-plugin/src/index.js b/rspack/generate-package-json-webpack-plugin/src/index.js
diff --git a/rspack/tailwindcss-with-type-css/index.html b/rspack/tailwindcss-with-type-css/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/rspack/tailwindcss-with-type-css/package.json b/rspack/tailwindcss-with-type-css/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@rspack-example/tailwindcss-with-type-css",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "rspack build",
+    "dev": "rspack dev"
+  },
+  "devDependencies": {
+    "@rspack/cli": "1.7.4",
+    "@rspack/core": "1.7.4",
+    "@tailwindcss/webpack": "^4.2.1",
+    "tailwindcss": "^4.2.1"
+  }
+}
diff --git a/rspack/tailwindcss-with-type-css/rspack.config.js b/rspack/tailwindcss-with-type-css/rspack.config.js
@@ -0,0 +1,33 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: {
+    main: './src/index.js',
+  },
+  experiments: {
+    css: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: '@tailwindcss/webpack',
+            options: {
+              // ...
+            },
+          },
+        ],
+        type: 'css',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/tailwindcss-with-type-css/src/answer.js b/rspack/tailwindcss-with-type-css/src/answer.js
@@ -0,0 +1 @@
+export const answer = 42;
diff --git a/rspack/tailwindcss-with-type-css/src/index.js b/rspack/tailwindcss-with-type-css/src/index.js
@@ -0,0 +1,9 @@
+import './main.css';
+import { answer } from './answer.js';
+
+function render() {
+  document.getElementById('root').innerHTML =
+    `<h1 class="text-3xl font-bold underline">the answer to the universe is ${answer}</h1>`;
+}
+
+render();
diff --git a/rspack/tailwindcss-with-type-css/src/main.css b/rspack/tailwindcss-with-type-css/src/main.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/rspack/tailwindcss/index.html b/rspack/tailwindcss/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Document1</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/rspack/tailwindcss/package.json b/rspack/tailwindcss/package.json
@@ -12,6 +12,7 @@
     "@rspack/cli": "1.7.4",
     "@rspack/core": "1.7.4",
     "@tailwindcss/webpack": "^4.2.1",
+    "css-loader": "^7.1.4",
     "tailwindcss": "^4.2.1"
   }
 }
diff --git a/rspack/tailwindcss/rspack.config.js b/rspack/tailwindcss/rspack.config.js
@@ -6,26 +6,25 @@ export default defineConfig({
   entry: {
     main: './src/index.js',
   },
-  experiments: {
-    css: true,
-  },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
+          rspack.CssExtractRspackPlugin.loader,
+          'css-loader',
           {
             loader: '@tailwindcss/webpack',
             options: {
               // ...
             },
           },
         ],
-        type: 'css',
       },
     ],
   },
   plugins: [
+    new rspack.CssExtractRspackPlugin(),
     new rspack.HtmlRspackPlugin({
       template: './index.html',
     }),

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@rspack-example/generate-package-json-webpack-plugin_2",`
	`2`	`+ "name": "@rspack-example/generate-package-json-webpack-plugin",`
`3`	`3`	`"private": true,`
`4`	`4`	`"scripts": {`
`5`	`5`	`"build": "rspack build"`