fix(webpack5-react): update tailwind config

FringeY · FringeY · commit 260ccbcfc3e0 · 2025-06-26T14:02:01.000+08:00
diff --git a/packages/plugin-webpack5-react/package.json b/packages/plugin-webpack5-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-toolkit-plugin-webpack5-react",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "console toolkit plugin for base react app",
   "main": "lib/index.js",
   "scripts": {
@@ -64,6 +64,7 @@
     "semver": "^7.3.2",
     "simple-progress-webpack-plugin": "^1.1.2",
     "style-loader": "^3.0.0",
+    "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5.3.6",
     "thread-loader": "^3.0.0",
     "url-loader": "^4.1.0",
diff --git a/packages/plugin-webpack5-react/src/types/index.d.ts b/packages/plugin-webpack5-react/src/types/index.d.ts
@@ -36,6 +36,7 @@ interface BreezrReactOptions {
   postCssPlugins?: any[];
   disableImportXConsoleCSS?: boolean;
   useSass?: boolean;
+  tailwindcss?: any;
 
   // babel-loader 配置
   babel?: Function;
@@ -163,6 +164,9 @@ interface BreezrStyleOptions extends Pick<BreezrReactOptions, 'appId' | 'console
   condition?: CssConditionType;
   postCssPlugins?: any[];
   useSass?: boolean;
+  tailwindcss?: {
+    config?: string;
+  };
 }
 
 interface ThemeDef {
diff --git a/packages/plugin-webpack5-react/src/webpack/common.ts b/packages/plugin-webpack5-react/src/webpack/common.ts
@@ -92,6 +92,7 @@ export const common = (config: Chain, options: BreezrReactOptions = defaultOptio
     appId,
     mf,
     useSass,
+    tailwindcss,
   } = options;
 
   if (!cwd) {
@@ -178,7 +179,8 @@ export const common = (config: Chain, options: BreezrReactOptions = defaultOptio
     consoleOS,
     disableConsoleOS,
     appId,
-    useSass
+    useSass,
+    tailwindcss,
   });
 
   file(config, options);
diff --git a/packages/plugin-webpack5-react/src/webpack/rules/style/index.ts b/packages/plugin-webpack5-react/src/webpack/rules/style/index.ts
@@ -1,5 +1,6 @@
 import * as path from 'path';
 import * as autoprefixer from 'autoprefixer';
+import * as tailwindcss from 'tailwindcss';
 import * as Chain from '@gem-mine/webpack-chain';
 import * as webpack from 'webpack';
 
@@ -19,6 +20,7 @@ function applyCssLoaders(rule: Chain.Rule, options: BreezrStyleOptions) {
     hashPrefix = '',
     disableAutoPrefixer = false,
     postCssPlugins = [],
+    tailwindcss: tailwindcssConfig = {},
   } = options;
 
   // extract-text-webpack-plugin 在 webpack 4 中用作提取 css 的时候存在问题
@@ -80,6 +82,13 @@ function applyCssLoaders(rule: Chain.Rule, options: BreezrStyleOptions) {
     }))
   }
 
+  // add tailwindcss plugin
+  if (tailwindcssConfig.config) {
+    postCssPlugins.unshift(tailwindcss({
+      config: tailwindcssConfig.config,
+    }));
+  }
+
   rule
     .use('postcss-loader')
     .loader(require.resolve('postcss-loader'))
