From be5a4b7ea28b2478c6ef21448eb0e147a41286ac Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 13:59:18 +0800
Subject: [PATCH 1/8] feat(plugin-tailwind): automatically read tailwind config
 file

---
 packages/cli/plugin-tailwind/package.json     |  1 +
 packages/cli/plugin-tailwind/src/cli.ts       | 74 +++++----------
 packages/cli/plugin-tailwind/src/config.ts    | 93 +++++++++++++++++++
 .../src/design-token/cli/index.ts             |  2 +-
 packages/cli/plugin-tailwind/src/macro.ts     | 60 ++++++++++++
 packages/cli/plugin-tailwind/src/tailwind.ts  | 50 ----------
 packages/cli/plugin-tailwind/src/types.ts     | 10 +-
 packages/cli/plugin-tailwind/src/utils.ts     | 52 -----------
 pnpm-lock.yaml                                |  3 +
 .../css/tests/tailwindcss-v2.test.ts          | 34 -------
 .../css/tests/tailwindcss-v3.test.ts          | 34 -------
 .../css/tests/twin.macro-v2.test.ts           | 34 -------
 .../css/tests/twin.macro-v3.test.ts           | 34 -------
 .../fixtures/tailwindcss-v2/modern.config.ts  |  0
 .../fixtures/tailwindcss-v2/package.json      |  0
 .../fixtures/tailwindcss-v2/src/App.jsx       |  2 +-
 .../modern.config.ts                          |  0
 .../tailwindcss-v3-js-config/package.json     | 14 +++
 .../tailwindcss-v3-js-config}/src/App.jsx     |  2 +-
 .../tailwind.config.js                        |  7 ++
 .../modern.config.ts                          | 23 +++++
 .../tailwindcss-v3-merge-config/package.json  | 14 +++
 .../tailwindcss-v3-merge-config/src/App.jsx   | 11 +++
 .../tailwind.config.ts                        |  7 ++
 .../tailwindcss-v3-ts-config/modern.config.ts | 14 +++
 .../tailwindcss-v3-ts-config/package.json     | 14 +++
 .../tailwindcss-v3-ts-config/src/App.jsx      | 11 +++
 .../tailwind.config.ts                        |  7 ++
 .../fixtures/tailwindcss-v3/modern.config.ts  | 14 +++
 .../fixtures/tailwindcss-v3/package.json      |  0
 .../fixtures/tailwindcss-v3/src/App.jsx       | 11 +++
 .../fixtures/twin.macro-v2/modern.config.ts   |  0
 .../fixtures/twin.macro-v2/package.json       |  0
 .../fixtures/twin.macro-v2/src/App.jsx        |  0
 .../fixtures/twin.macro-v3/modern.config.ts   |  0
 .../fixtures/twin.macro-v3/package.json       |  0
 .../fixtures/twin.macro-v3/src/App.jsx        |  0
 .../{css => tailwindcss}/package.json         |  2 +-
 .../tailwindcss/tests/tailwindcss-v2.test.ts  | 17 ++++
 .../tailwindcss/tests/tailwindcss-v3.test.ts  | 56 +++++++++++
 .../{css => tailwindcss}/tests/tsconfig.json  |  0
 .../tailwindcss/tests/twin.macro-v2.test.ts   | 17 ++++
 .../tailwindcss/tests/twin.macro-v3.test.ts   | 16 ++++
 .../{css => tailwindcss}/tests/utils.ts       | 26 ++++++
 44 files changed, 468 insertions(+), 298 deletions(-)
 create mode 100644 packages/cli/plugin-tailwind/src/config.ts
 create mode 100644 packages/cli/plugin-tailwind/src/macro.ts
 delete mode 100644 packages/cli/plugin-tailwind/src/tailwind.ts
 delete mode 100644 tests/integration/css/tests/tailwindcss-v2.test.ts
 delete mode 100644 tests/integration/css/tests/tailwindcss-v3.test.ts
 delete mode 100644 tests/integration/css/tests/twin.macro-v2.test.ts
 delete mode 100644 tests/integration/css/tests/twin.macro-v3.test.ts
 rename tests/integration/{css => tailwindcss}/fixtures/tailwindcss-v2/modern.config.ts (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/tailwindcss-v2/package.json (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/tailwindcss-v2/src/App.jsx (73%)
 rename tests/integration/{css/fixtures/tailwindcss-v3 => tailwindcss/fixtures/tailwindcss-v3-js-config}/modern.config.ts (100%)
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/package.json
 rename tests/integration/{css/fixtures/tailwindcss-v3 => tailwindcss/fixtures/tailwindcss-v3-js-config}/src/App.jsx (73%)
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/tailwind.config.js
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/modern.config.ts
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/package.json
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/src/App.jsx
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/tailwind.config.ts
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/modern.config.ts
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/package.json
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/src/App.jsx
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/tailwind.config.ts
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3/modern.config.ts
 rename tests/integration/{css => tailwindcss}/fixtures/tailwindcss-v3/package.json (100%)
 create mode 100644 tests/integration/tailwindcss/fixtures/tailwindcss-v3/src/App.jsx
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v2/modern.config.ts (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v2/package.json (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v2/src/App.jsx (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v3/modern.config.ts (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v3/package.json (100%)
 rename tests/integration/{css => tailwindcss}/fixtures/twin.macro-v3/src/App.jsx (100%)
 rename tests/integration/{css => tailwindcss}/package.json (74%)
 create mode 100644 tests/integration/tailwindcss/tests/tailwindcss-v2.test.ts
 create mode 100644 tests/integration/tailwindcss/tests/tailwindcss-v3.test.ts
 rename tests/integration/{css => tailwindcss}/tests/tsconfig.json (100%)
 create mode 100644 tests/integration/tailwindcss/tests/twin.macro-v2.test.ts
 create mode 100644 tests/integration/tailwindcss/tests/twin.macro-v3.test.ts
 rename tests/integration/{css => tailwindcss}/tests/utils.ts (63%)

diff --git a/packages/cli/plugin-tailwind/package.json b/packages/cli/plugin-tailwind/package.json
index 8ce85de4f7e8..9021a4c01992 100644
--- a/packages/cli/plugin-tailwind/package.json
+++ b/packages/cli/plugin-tailwind/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@modern-js/utils": "workspace:*",
+    "@modern-js/node-bundle-require": "workspace:*",
     "babel-plugin-macros": "3.1.0",
     "hoist-non-react-statics": "^3.3.2",
     "@swc/helpers": "0.5.1"
diff --git a/packages/cli/plugin-tailwind/src/cli.ts b/packages/cli/plugin-tailwind/src/cli.ts
index e83d4cae2c27..abc05e4bf933 100644
--- a/packages/cli/plugin-tailwind/src/cli.ts
+++ b/packages/cli/plugin-tailwind/src/cli.ts
@@ -1,42 +1,16 @@
 import path from 'path';
-import { fs, CONFIG_CACHE_DIR, globby, nanoid, slash } from '@modern-js/utils';
+import { fs, CONFIG_CACHE_DIR, globby, slash } from '@modern-js/utils';
 import type { LegacyAppTools, NormalizedConfig } from '@modern-js/app-tools';
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
-import designTokenPlugin from './design-token/cli';
-import { getTailwindConfig } from './tailwind';
+import { designTokenPlugin } from './design-token/cli';
+import { getTailwindConfig, loadConfigFile } from './config';
+import { getTailwindPath, getTailwindVersion } from './utils';
 import {
   template,
   checkTwinMacroExist,
-  getTailwindPath,
-  getTailwindVersion,
   getTwinMacroMajorVersion,
-} from './utils';
-
-const supportCssInJsLibrary = 'styled-components';
-
-export const getRandomTwConfigFileName = (internalDirectory: string) => {
-  return slash(
-    path.join(
-      internalDirectory,
-      `tailwind.config.${Date.now()}.${nanoid()}.js`,
-    ),
-  );
-};
-
-function getDefaultContent(appDirectory: string) {
-  const defaultContent = ['./src/**/*.{js,jsx,ts,tsx}'];
-
-  // Only add storybook and html config when they exist
-  // Otherwise, it will cause an unnecessary rebuild
-  if (fs.existsSync(path.join(appDirectory, 'storybook'))) {
-    defaultContent.push('./storybook/**/*');
-  }
-  if (fs.existsSync(path.join(appDirectory, 'config/html'))) {
-    defaultContent.push('./config/html/**/*.{html,ejs,hbs}');
-  }
-
-  return defaultContent;
-}
+  getRandomTwConfigFileName,
+} from './macro';
 
 export const tailwindcssPlugin = (
   { pluginName } = {
@@ -51,6 +25,7 @@ export const tailwindcssPlugin = (
       pluginName,
     }),
   ],
+
   setup: async api => {
     const { appDirectory, internalDirectory } = api.useAppContext();
     let internalTwConfigPath = '';
@@ -58,7 +33,7 @@ export const tailwindcssPlugin = (
     const haveTwinMacro = await checkTwinMacroExist(appDirectory);
     const tailwindPath = getTailwindPath(appDirectory);
     const tailwindVersion = getTailwindVersion(appDirectory);
-    const defaultContent = getDefaultContent(appDirectory);
+    const userTailwindConfig = await loadConfigFile(appDirectory);
 
     return {
       prepare() {
@@ -103,16 +78,13 @@ export const tailwindcssPlugin = (
         const initTailwindConfig = () => {
           if (!tailwindConfig) {
             const modernConfig = api.useResolvedConfigContext();
-            tailwindConfig = getTailwindConfig(
+            tailwindConfig = getTailwindConfig({
+              appDirectory,
               tailwindVersion,
-              modernConfig?.tools?.tailwindcss,
-              modernConfig?.source?.designSystem,
-              {
-                pureConfig: {
-                  content: defaultContent,
-                },
-              },
-            );
+              userConfig: userTailwindConfig,
+              extraConfig: modernConfig?.tools?.tailwindcss,
+              designSystem: modernConfig?.source?.designSystem,
+            });
           }
         };
 
@@ -133,6 +105,7 @@ export const tailwindcssPlugin = (
 
             babel: haveTwinMacro
               ? (_, { addPlugins }) => {
+                  const supportCssInJsLibrary = 'styled-components';
                   initTailwindConfig();
                   addPlugins([
                     [
@@ -154,17 +127,13 @@ export const tailwindcssPlugin = (
       beforeBuildTask(config) {
         const modernConfig =
           api.useResolvedConfigContext() as NormalizedConfig<ModuleTools>;
-        const { designSystem } = modernConfig;
-        const tailwindConfig = getTailwindConfig(
+        const tailwindConfig = getTailwindConfig({
+          appDirectory,
           tailwindVersion,
-          config.style.tailwindcss,
-          designSystem,
-          {
-            pureConfig: {
-              content: defaultContent,
-            },
-          },
-        );
+          userConfig: userTailwindConfig,
+          extraConfig: config.style.tailwindcss,
+          designSystem: modernConfig.designSystem,
+        });
 
         const tailwindPlugin = require(tailwindPath)(tailwindConfig);
         if (Array.isArray(config.style.postcss.plugins)) {
@@ -175,6 +144,7 @@ export const tailwindcssPlugin = (
 
         return config;
       },
+
       modifyLibuild(config, next) {
         config.transformCache = false;
         return next(config);
diff --git a/packages/cli/plugin-tailwind/src/config.ts b/packages/cli/plugin-tailwind/src/config.ts
new file mode 100644
index 000000000000..84b2b66ca15d
--- /dev/null
+++ b/packages/cli/plugin-tailwind/src/config.ts
@@ -0,0 +1,93 @@
+import path from 'path';
+import { fs, applyOptionsChain, findExists } from '@modern-js/utils';
+import { cloneDeep } from '@modern-js/utils/lodash';
+import { bundleRequire } from '@modern-js/node-bundle-require';
+import type {
+  DesignSystem,
+  TailwindConfig,
+  ExtraTailwindConfig,
+} from './types';
+
+function getDefaultContent(appDirectory: string) {
+  const defaultContent = ['./src/**/*.{js,jsx,ts,tsx}'];
+
+  // Only add storybook and html config when they exist
+  // Otherwise, it will cause an unnecessary rebuild
+  if (fs.existsSync(path.join(appDirectory, 'storybook'))) {
+    defaultContent.push('./storybook/**/*');
+  }
+  if (fs.existsSync(path.join(appDirectory, 'config/html'))) {
+    defaultContent.push('./config/html/**/*.{html,ejs,hbs}');
+  }
+
+  return defaultContent;
+}
+
+const getPureDesignSystemConfig = (config: DesignSystem) => {
+  const pureConfig = cloneDeep(config);
+  delete pureConfig.supportStyledComponents;
+  return pureConfig;
+};
+
+const getV2PurgeConfig = (content: string[]) => ({
+  enabled: process.env.NODE_ENV === 'production',
+  layers: ['utilities'],
+  content,
+});
+
+export async function loadConfigFile(appDirectory: string) {
+  const extensions = ['ts', 'js', 'cjs', 'mjs'];
+  const configs = extensions.map(ext =>
+    path.resolve(appDirectory, `tailwind.config.${ext}`),
+  );
+  const configFile = findExists(configs);
+
+  if (configFile) {
+    const mod = await bundleRequire(configFile);
+    return mod.default || mod;
+  }
+
+  return {};
+}
+
+/**
+ * Config priority:
+ * `source.designSystem` > `tools.tailwindcss` (extraConfig) > `tailwind.config.*` (userConfig) > `defaultConfig`
+ */
+const getTailwindConfig = ({
+  tailwindVersion,
+  appDirectory,
+  userConfig,
+  extraConfig,
+  designSystem,
+}: {
+  tailwindVersion: '2' | '3';
+  appDirectory: string;
+  userConfig: TailwindConfig;
+  extraConfig?: ExtraTailwindConfig;
+  designSystem?: DesignSystem;
+}) => {
+  const content = getDefaultContent(appDirectory);
+
+  let tailwindConfig: TailwindConfig =
+    tailwindVersion === '3'
+      ? { content }
+      : { purge: getV2PurgeConfig(content) };
+
+  Object.assign(tailwindConfig, userConfig);
+
+  tailwindConfig = extraConfig
+    ? applyOptionsChain(tailwindConfig, extraConfig)
+    : tailwindConfig;
+
+  const designSystemConfig = getPureDesignSystemConfig(designSystem ?? {});
+
+  // if designSystem config is used, it will override the theme config of tailwind
+  if (designSystemConfig && Object.keys(designSystemConfig).length > 0) {
+    tailwindConfig.theme = designSystemConfig;
+  }
+
+  return tailwindConfig;
+};
+
+export { getTailwindConfig };
diff --git a/packages/cli/plugin-tailwind/src/design-token/cli/index.ts b/packages/cli/plugin-tailwind/src/design-token/cli/index.ts
index 839883c99de6..10fb3fbf43c9 100644
--- a/packages/cli/plugin-tailwind/src/design-token/cli/index.ts
+++ b/packages/cli/plugin-tailwind/src/design-token/cli/index.ts
@@ -2,7 +2,7 @@ import { lazyImport, createRuntimeExportsUtils } from '@modern-js/utils';
 import type { CliPlugin, LegacyAppTools } from '@modern-js/app-tools';
 import { DesignSystem } from '../../types';
 
-export default (
+export const designTokenPlugin = (
   { pluginName } = { pluginName: '@modern-js/plugin-tailwindcss' },
 ): CliPlugin<LegacyAppTools> => ({
   name: '@modern-js/plugin-design-token',
diff --git a/packages/cli/plugin-tailwind/src/macro.ts b/packages/cli/plugin-tailwind/src/macro.ts
new file mode 100644
index 000000000000..454fe95b1766
--- /dev/null
+++ b/packages/cli/plugin-tailwind/src/macro.ts
@@ -0,0 +1,60 @@
+import path from 'path';
+import { fs, nanoid, slash } from '@modern-js/utils';
+
+export const template = (configPath: string) => `
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : { default: obj };
+}
+const modernConfig = _interopRequireDefault(require('${configPath}')).default;
+
+const theme =
+    modernConfig && modernConfig.source && modernConfig.source.designSystem
+      ? modernConfig.source.designSystem
+      : {};
+const tailwindcss =
+    modernConfig && modernConfig.tools && modernConfig.tools.tailwindcss
+      ? modernConfig.tools.tailwindcss
+      : {};
+
+module.exports = {
+    theme,
+    ...tailwindcss,
+};
+`;
+
+const TWIN_MACRO_NAME = 'twin.macro';
+
+export const checkTwinMacroExist = async (appDirectory: string) => {
+  const packageJson =
+    (await fs.readJSON(path.join(appDirectory, 'package.json'), {
+      throws: false,
+    })) || {};
+
+  return Boolean(
+    (typeof packageJson.dependencies === 'object' &&
+      packageJson.dependencies[TWIN_MACRO_NAME]) ||
+      (typeof packageJson.devDependencies === 'object' &&
+        packageJson.devDependencies[TWIN_MACRO_NAME]),
+  );
+};
+
+export const getTwinMacroMajorVersion = (appDirectory: string) => {
+  try {
+    const pkgJsonPath = require.resolve(`${TWIN_MACRO_NAME}/package.json`, {
+      paths: [appDirectory],
+    });
+    const { version } = require(pkgJsonPath);
+    return Number(version.split('.')[0]);
+  } catch (err) {
+    return null;
+  }
+};
+
+export const getRandomTwConfigFileName = (internalDirectory: string) => {
+  return slash(
+    path.join(
+      internalDirectory,
+      `tailwind.config.${Date.now()}.${nanoid()}.js`,
+    ),
+  );
+};
diff --git a/packages/cli/plugin-tailwind/src/tailwind.ts b/packages/cli/plugin-tailwind/src/tailwind.ts
deleted file mode 100644
index 815771844d4b..000000000000
--- a/packages/cli/plugin-tailwind/src/tailwind.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { applyOptionsChain } from '@modern-js/utils';
-import { merge, cloneDeep } from '@modern-js/utils/lodash';
-import { DesignSystem, Tailwind } from './types';
-
-const getPureDesignSystemConfig = (config: DesignSystem) => {
-  const pureConfig = cloneDeep(config);
-  delete pureConfig.supportStyledComponents;
-  return pureConfig;
-};
-
-const getTailwindConfig = (
-  tailwindVersion: '2' | '3',
-  tailwindcss?: Tailwind,
-  designSystem?: DesignSystem,
-  option: { pureConfig?: Record<string, any> } = {},
-) => {
-  const purgeConfig = merge(
-    {
-      // TODO: how the operating environment is determined
-      enabled: process.env.NODE_ENV === 'production',
-      // TODO: Remove or not
-      layers: ['utilities'],
-      content: [],
-    },
-    option.pureConfig || {},
-  );
-
-  const defaultTailwindConfig =
-    tailwindVersion === '3'
-      ? { content: purgeConfig.content }
-      : {
-          purge: purgeConfig,
-        };
-
-  const tailwindConfig = applyOptionsChain(
-    defaultTailwindConfig,
-    tailwindcss || {},
-  );
-
-  const designSystemConfig = getPureDesignSystemConfig(designSystem ?? {});
-
-  // if designSystem config is used, it will override the theme config of tailwind
-  if (designSystemConfig && Object.keys(designSystemConfig).length > 0) {
-    tailwindConfig.theme = designSystemConfig;
-  }
-
-  return tailwindConfig;
-};
-
-export { getTailwindConfig };
diff --git a/packages/cli/plugin-tailwind/src/types.ts b/packages/cli/plugin-tailwind/src/types.ts
index d6a76aa02a85..3f33ba056c70 100644
--- a/packages/cli/plugin-tailwind/src/types.ts
+++ b/packages/cli/plugin-tailwind/src/types.ts
@@ -1,7 +1,9 @@
-export type DesignSystem = Record<string, any> & {
+export type DesignSystem = TailwindConfig & {
   supportStyledComponents?: boolean;
 };
 
-export type Tailwind =
-  | Record<string, any>
-  | ((options: Record<string, any>) => Record<string, any> | void);
+export type TailwindConfig = Record<string, any>;
+
+export type ExtraTailwindConfig =
+  | TailwindConfig
+  | ((options: TailwindConfig) => TailwindConfig | void);
diff --git a/packages/cli/plugin-tailwind/src/utils.ts b/packages/cli/plugin-tailwind/src/utils.ts
index 50a7429f42ad..3b5c2916246e 100644
--- a/packages/cli/plugin-tailwind/src/utils.ts
+++ b/packages/cli/plugin-tailwind/src/utils.ts
@@ -1,55 +1,3 @@
-import path from 'path';
-import { fs } from '@modern-js/utils';
-
-export const template = (configPath: string) => `
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : { default: obj };
-}
-const modernConfig = _interopRequireDefault(require('${configPath}')).default;
-
-const theme =
-    modernConfig && modernConfig.source && modernConfig.source.designSystem
-      ? modernConfig.source.designSystem
-      : {};
-const tailwindcss =
-    modernConfig && modernConfig.tools && modernConfig.tools.tailwindcss
-      ? modernConfig.tools.tailwindcss
-      : {};
-
-module.exports = {
-    theme,
-    ...tailwindcss,
-};
-`;
-
-const TWIN_MACRO_NAME = 'twin.macro';
-
-export const checkTwinMacroExist = async (appDirectory: string) => {
-  const packageJson =
-    (await fs.readJSON(path.join(appDirectory, 'package.json'), {
-      throws: false,
-    })) || {};
-
-  return Boolean(
-    (typeof packageJson.dependencies === 'object' &&
-      packageJson.dependencies[TWIN_MACRO_NAME]) ||
-      (typeof packageJson.devDependencies === 'object' &&
-        packageJson.devDependencies[TWIN_MACRO_NAME]),
-  );
-};
-
-export const getTwinMacroMajorVersion = (appDirectory: string) => {
-  try {
-    const pkgJsonPath = require.resolve(`${TWIN_MACRO_NAME}/package.json`, {
-      paths: [appDirectory],
-    });
-    const { version } = require(pkgJsonPath);
-    return Number(version.split('.')[0]);
-  } catch (err) {
-    return null;
-  }
-};
-
 export function getTailwindPath(appDirectory: string) {
   try {
     return require.resolve('tailwindcss', { paths: [appDirectory, __dirname] });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5f8f6740f44..62e1158a4f77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1987,6 +1987,9 @@ importers:
 
   packages/cli/plugin-tailwind:
     dependencies:
+      '@modern-js/node-bundle-require':
+        specifier: workspace:*
+        version: link:../../toolkit/node-bundle-require
       '@modern-js/utils':
         specifier: workspace:*
         version: link:../../toolkit/utils
diff --git a/tests/integration/css/tests/tailwindcss-v2.test.ts b/tests/integration/css/tests/tailwindcss-v2.test.ts
deleted file mode 100644
index 87ef835b0bbc..000000000000
--- a/tests/integration/css/tests/tailwindcss-v2.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import path from 'path';
-import puppeteer from 'puppeteer';
-import {
-  getPort,
-  killApp,
-  launchApp,
-  launchOptions,
-} from '../../../utils/modernTestUtils';
-import { fixtures } from './utils';
-
-describe('use tailwindcss v2', () => {
-  test(`should show style by use tailwindcss text-black`, async () => {
-    const appDir = path.resolve(fixtures, 'tailwindcss-v2');
-
-    const port = await getPort();
-
-    const app = await launchApp(appDir, port);
-
-    const browser = await puppeteer.launch(launchOptions as any);
-    const page = await browser.newPage();
-
-    await page.goto(`http://localhost:${port}`);
-
-    const textColor = await page.$eval('p', p =>
-      window.getComputedStyle(p).getPropertyValue('color'),
-    );
-
-    expect(textColor).toBe('rgb(0, 0, 0)');
-
-    await killApp(app);
-    await page.close();
-    await browser.close();
-  });
-});
diff --git a/tests/integration/css/tests/tailwindcss-v3.test.ts b/tests/integration/css/tests/tailwindcss-v3.test.ts
deleted file mode 100644
index c4e6b700b646..000000000000
--- a/tests/integration/css/tests/tailwindcss-v3.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import path from 'path';
-import puppeteer from 'puppeteer';
-import {
-  getPort,
-  killApp,
-  launchApp,
-  launchOptions,
-} from '../../../utils/modernTestUtils';
-import { fixtures } from './utils';
-
-describe('use tailwindcss v3', () => {
-  test(`should show style by use tailwindcss text-black`, async () => {
-    const appDir = path.resolve(fixtures, 'tailwindcss-v3');
-
-    const port = await getPort();
-
-    const app = await launchApp(appDir, port);
-
-    const browser = await puppeteer.launch(launchOptions as any);
-    const page = await browser.newPage();
-
-    await page.goto(`http://localhost:${port}`);
-
-    const textColor = await page.$eval('p', p =>
-      window.getComputedStyle(p).getPropertyValue('color'),
-    );
-
-    expect(textColor).toBe('rgb(0, 0, 0)');
-
-    await killApp(app);
-    await page.close();
-    await browser.close();
-  });
-});
diff --git a/tests/integration/css/tests/twin.macro-v2.test.ts b/tests/integration/css/tests/twin.macro-v2.test.ts
deleted file mode 100644
index 56cd7f2a2432..000000000000
--- a/tests/integration/css/tests/twin.macro-v2.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import path from 'path';
-import puppeteer from 'puppeteer';
-import {
-  getPort,
-  killApp,
-  launchApp,
-  launchOptions,
-} from '../../../utils/modernTestUtils';
-import { fixtures } from './utils';
-
-describe('use twin.macro v2', () => {
-  test(`should show style by use tailwindcss theme when use twin.macro v2`, async () => {
-    const appDir = path.resolve(fixtures, 'twin.macro-v2');
-
-    const port = await getPort();
-
-    const app = await launchApp(appDir, port);
-
-    const browser = await puppeteer.launch(launchOptions as any);
-    const page = await browser.newPage();
-
-    await page.goto(`http://localhost:${port}`);
-
-    const textColor = await page.$eval('p', p =>
-      window.getComputedStyle(p).getPropertyValue('color'),
-    );
-
-    expect(textColor).toBe('rgb(255, 0, 0)');
-
-    await killApp(app);
-    await page.close();
-    await browser.close();
-  });
-});
diff --git a/tests/integration/css/tests/twin.macro-v3.test.ts b/tests/integration/css/tests/twin.macro-v3.test.ts
deleted file mode 100644
index e88908a7d1ff..000000000000
--- a/tests/integration/css/tests/twin.macro-v3.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import path from 'path';
-import puppeteer from 'puppeteer';
-import {
-  getPort,
-  killApp,
-  launchApp,
-  launchOptions,
-} from '../../../utils/modernTestUtils';
-import { fixtures } from './utils';
-
-describe('use twin.macro v2', () => {
-  test(`should show style by use tailwindcss theme when use twin.macro v2`, async () => {
-    const appDir = path.resolve(fixtures, 'twin.macro-v3');
-
-    const port = await getPort();
-
-    const app = await launchApp(appDir, port);
-
-    const browser = await puppeteer.launch(launchOptions as any);
-    const page = await browser.newPage();
-
-    await page.goto(`http://localhost:${port}`);
-
-    const textColor = await page.$eval('p', p =>
-      window.getComputedStyle(p).getPropertyValue('color'),
-    );
-
-    expect(textColor).toBe('rgb(255, 0, 0)');
-
-    await killApp(app);
-    await page.close();
-    await browser.close();
-  });
-});
diff --git a/tests/integration/css/fixtures/tailwindcss-v2/modern.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v2/modern.config.ts
similarity index 100%
rename from tests/integration/css/fixtures/tailwindcss-v2/modern.config.ts
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v2/modern.config.ts
diff --git a/tests/integration/css/fixtures/tailwindcss-v2/package.json b/tests/integration/tailwindcss/fixtures/tailwindcss-v2/package.json
similarity index 100%
rename from tests/integration/css/fixtures/tailwindcss-v2/package.json
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v2/package.json
diff --git a/tests/integration/css/fixtures/tailwindcss-v2/src/App.jsx b/tests/integration/tailwindcss/fixtures/tailwindcss-v2/src/App.jsx
similarity index 73%
rename from tests/integration/css/fixtures/tailwindcss-v2/src/App.jsx
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v2/src/App.jsx
index 52b333cd523a..b6439563757e 100644
--- a/tests/integration/css/fixtures/tailwindcss-v2/src/App.jsx
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v2/src/App.jsx
@@ -4,7 +4,7 @@ import 'tailwindcss/utilities.css';
 
 const App = () => (
   <div className="h-12 w-48">
-    <p className="text-xl font-medium text-black">hello world</p>
+    <p className="text-xl font-medium text-red-500">hello world</p>
   </div>
 );
 
diff --git a/tests/integration/css/fixtures/tailwindcss-v3/modern.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/modern.config.ts
similarity index 100%
rename from tests/integration/css/fixtures/tailwindcss-v3/modern.config.ts
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/modern.config.ts
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/package.json b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/package.json
new file mode 100644
index 000000000000..ad3e0c58fa84
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "integration-tailwindcss-v3-js-config",
+  "version": "2.9.0",
+  "dependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "@modern-js/plugin-tailwindcss": "workspace:*",
+    "@modern-js/runtime": "workspace:*",
+    "postcss": "8.4.27",
+    "tailwindcss": "^3.3.3",
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}
diff --git a/tests/integration/css/fixtures/tailwindcss-v3/src/App.jsx b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/src/App.jsx
similarity index 73%
rename from tests/integration/css/fixtures/tailwindcss-v3/src/App.jsx
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/src/App.jsx
index 52b333cd523a..b6439563757e 100644
--- a/tests/integration/css/fixtures/tailwindcss-v3/src/App.jsx
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/src/App.jsx
@@ -4,7 +4,7 @@ import 'tailwindcss/utilities.css';
 
 const App = () => (
   <div className="h-12 w-48">
-    <p className="text-xl font-medium text-black">hello world</p>
+    <p className="text-xl font-medium text-red-500">hello world</p>
   </div>
 );
 
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/tailwind.config.js b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/tailwind.config.js
new file mode 100644
index 000000000000..65cc34ce46ed
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    colors: {
+      'red-500': '#1fb6ff',
+    },
+  },
+};
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/modern.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/modern.config.ts
new file mode 100644
index 000000000000..dd51dc70800a
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/modern.config.ts
@@ -0,0 +1,23 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [
+    appTools({
+      bundler:
+        process.env.PROVIDE_TYPE === 'rspack'
+          ? 'experimental-rspack'
+          : 'webpack',
+    }),
+    tailwindcssPlugin(),
+  ],
+  tools: {
+    tailwindcss: {
+      theme: {
+        colors: {
+          'red-500': 'green',
+        },
+      },
+    },
+  },
+});
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/package.json b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/package.json
new file mode 100644
index 000000000000..9a3462981e53
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "integration-tailwindcss-v3-merge-config",
+  "version": "2.9.0",
+  "dependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "@modern-js/plugin-tailwindcss": "workspace:*",
+    "@modern-js/runtime": "workspace:*",
+    "postcss": "8.4.27",
+    "tailwindcss": "^3.3.3",
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/src/App.jsx b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/src/App.jsx
new file mode 100644
index 000000000000..b6439563757e
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/src/App.jsx
@@ -0,0 +1,11 @@
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+
+const App = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-red-500">hello world</p>
+  </div>
+);
+
+export default App;
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/tailwind.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/tailwind.config.ts
new file mode 100644
index 000000000000..093adfe70dc9
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config/tailwind.config.ts
@@ -0,0 +1,7 @@
+export default {
+  theme: {
+    colors: {
+      'red-500': '#1fb6ff',
+    },
+  },
+};
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/modern.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/modern.config.ts
new file mode 100644
index 000000000000..8d76c157aac1
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/modern.config.ts
@@ -0,0 +1,14 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [
+    appTools({
+      bundler:
+        process.env.PROVIDE_TYPE === 'rspack'
+          ? 'experimental-rspack'
+          : 'webpack',
+    }),
+    tailwindcssPlugin(),
+  ],
+});
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/package.json b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/package.json
new file mode 100644
index 000000000000..0d6f40dc631e
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "integration-tailwindcss-v3-ts-config",
+  "version": "2.9.0",
+  "dependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "@modern-js/plugin-tailwindcss": "workspace:*",
+    "@modern-js/runtime": "workspace:*",
+    "postcss": "8.4.27",
+    "tailwindcss": "^3.3.3",
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/src/App.jsx b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/src/App.jsx
new file mode 100644
index 000000000000..b6439563757e
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/src/App.jsx
@@ -0,0 +1,11 @@
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+
+const App = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-red-500">hello world</p>
+  </div>
+);
+
+export default App;
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/tailwind.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/tailwind.config.ts
new file mode 100644
index 000000000000..093adfe70dc9
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config/tailwind.config.ts
@@ -0,0 +1,7 @@
+export default {
+  theme: {
+    colors: {
+      'red-500': '#1fb6ff',
+    },
+  },
+};
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3/modern.config.ts b/tests/integration/tailwindcss/fixtures/tailwindcss-v3/modern.config.ts
new file mode 100644
index 000000000000..8d76c157aac1
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3/modern.config.ts
@@ -0,0 +1,14 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [
+    appTools({
+      bundler:
+        process.env.PROVIDE_TYPE === 'rspack'
+          ? 'experimental-rspack'
+          : 'webpack',
+    }),
+    tailwindcssPlugin(),
+  ],
+});
diff --git a/tests/integration/css/fixtures/tailwindcss-v3/package.json b/tests/integration/tailwindcss/fixtures/tailwindcss-v3/package.json
similarity index 100%
rename from tests/integration/css/fixtures/tailwindcss-v3/package.json
rename to tests/integration/tailwindcss/fixtures/tailwindcss-v3/package.json
diff --git a/tests/integration/tailwindcss/fixtures/tailwindcss-v3/src/App.jsx b/tests/integration/tailwindcss/fixtures/tailwindcss-v3/src/App.jsx
new file mode 100644
index 000000000000..b6439563757e
--- /dev/null
+++ b/tests/integration/tailwindcss/fixtures/tailwindcss-v3/src/App.jsx
@@ -0,0 +1,11 @@
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+
+const App = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-red-500">hello world</p>
+  </div>
+);
+
+export default App;
diff --git a/tests/integration/css/fixtures/twin.macro-v2/modern.config.ts b/tests/integration/tailwindcss/fixtures/twin.macro-v2/modern.config.ts
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v2/modern.config.ts
rename to tests/integration/tailwindcss/fixtures/twin.macro-v2/modern.config.ts
diff --git a/tests/integration/css/fixtures/twin.macro-v2/package.json b/tests/integration/tailwindcss/fixtures/twin.macro-v2/package.json
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v2/package.json
rename to tests/integration/tailwindcss/fixtures/twin.macro-v2/package.json
diff --git a/tests/integration/css/fixtures/twin.macro-v2/src/App.jsx b/tests/integration/tailwindcss/fixtures/twin.macro-v2/src/App.jsx
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v2/src/App.jsx
rename to tests/integration/tailwindcss/fixtures/twin.macro-v2/src/App.jsx
diff --git a/tests/integration/css/fixtures/twin.macro-v3/modern.config.ts b/tests/integration/tailwindcss/fixtures/twin.macro-v3/modern.config.ts
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v3/modern.config.ts
rename to tests/integration/tailwindcss/fixtures/twin.macro-v3/modern.config.ts
diff --git a/tests/integration/css/fixtures/twin.macro-v3/package.json b/tests/integration/tailwindcss/fixtures/twin.macro-v3/package.json
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v3/package.json
rename to tests/integration/tailwindcss/fixtures/twin.macro-v3/package.json
diff --git a/tests/integration/css/fixtures/twin.macro-v3/src/App.jsx b/tests/integration/tailwindcss/fixtures/twin.macro-v3/src/App.jsx
similarity index 100%
rename from tests/integration/css/fixtures/twin.macro-v3/src/App.jsx
rename to tests/integration/tailwindcss/fixtures/twin.macro-v3/src/App.jsx
diff --git a/tests/integration/css/package.json b/tests/integration/tailwindcss/package.json
similarity index 74%
rename from tests/integration/css/package.json
rename to tests/integration/tailwindcss/package.json
index 69314fd87122..6e3caa970d91 100644
--- a/tests/integration/css/package.json
+++ b/tests/integration/tailwindcss/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "css-test",
+  "name": "tailwindcss-integration-test",
   "version": "2.9.0",
   "dependencies": {
     "@types/jest": "^29",
diff --git a/tests/integration/tailwindcss/tests/tailwindcss-v2.test.ts b/tests/integration/tailwindcss/tests/tailwindcss-v2.test.ts
new file mode 100644
index 000000000000..16a810af947b
--- /dev/null
+++ b/tests/integration/tailwindcss/tests/tailwindcss-v2.test.ts
@@ -0,0 +1,17 @@
+import path from 'path';
+import { fixtures, launchAppWithPage } from './utils';
+
+describe('use tailwindcss v2', () => {
+  test(`should show style by use tailwindcss text-black`, async () => {
+    const appDir = path.resolve(fixtures, 'tailwindcss-v2');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(239, 68, 68)');
+
+    await clear();
+  });
+});
diff --git a/tests/integration/tailwindcss/tests/tailwindcss-v3.test.ts b/tests/integration/tailwindcss/tests/tailwindcss-v3.test.ts
new file mode 100644
index 000000000000..6864fe07bcac
--- /dev/null
+++ b/tests/integration/tailwindcss/tests/tailwindcss-v3.test.ts
@@ -0,0 +1,56 @@
+import path from 'path';
+import { fixtures, launchAppWithPage } from './utils';
+
+describe('use tailwindcss v3', () => {
+  test(`should show style by use tailwindcss text-black`, async () => {
+    const appDir = path.resolve(fixtures, 'tailwindcss-v3');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(239, 68, 68)');
+
+    await clear();
+  });
+
+  test(`should load tailwind.config.js correctly`, async () => {
+    const appDir = path.resolve(fixtures, 'tailwindcss-v3-js-config');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(31, 182, 255)');
+
+    await clear();
+  });
+
+  test(`should load tailwind.config.ts correctly`, async () => {
+    const appDir = path.resolve(fixtures, 'tailwindcss-v3-ts-config');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(31, 182, 255)');
+
+    await clear();
+  });
+
+  test(`should merge tailwind config correctly`, async () => {
+    const appDir = path.resolve(fixtures, 'tailwindcss-v3-merge-config');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(0, 128, 0)');
+
+    await clear();
+  });
+});
diff --git a/tests/integration/css/tests/tsconfig.json b/tests/integration/tailwindcss/tests/tsconfig.json
similarity index 100%
rename from tests/integration/css/tests/tsconfig.json
rename to tests/integration/tailwindcss/tests/tsconfig.json
diff --git a/tests/integration/tailwindcss/tests/twin.macro-v2.test.ts b/tests/integration/tailwindcss/tests/twin.macro-v2.test.ts
new file mode 100644
index 000000000000..d4b75c2f790a
--- /dev/null
+++ b/tests/integration/tailwindcss/tests/twin.macro-v2.test.ts
@@ -0,0 +1,17 @@
+import path from 'path';
+import { fixtures, launchAppWithPage } from './utils';
+
+describe('use twin.macro v2', () => {
+  test(`should show style by use tailwindcss theme when use twin.macro v2`, async () => {
+    const appDir = path.resolve(fixtures, 'twin.macro-v2');
+    const { page, clear } = await launchAppWithPage(appDir);
+
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(255, 0, 0)');
+
+    await clear();
+  });
+});
diff --git a/tests/integration/tailwindcss/tests/twin.macro-v3.test.ts b/tests/integration/tailwindcss/tests/twin.macro-v3.test.ts
new file mode 100644
index 000000000000..c369543d635b
--- /dev/null
+++ b/tests/integration/tailwindcss/tests/twin.macro-v3.test.ts
@@ -0,0 +1,16 @@
+import path from 'path';
+import { fixtures, launchAppWithPage } from './utils';
+
+describe('use twin.macro v2', () => {
+  test(`should show style by use tailwindcss theme when use twin.macro v2`, async () => {
+    const appDir = path.resolve(fixtures, 'twin.macro-v3');
+    const { page, clear } = await launchAppWithPage(appDir);
+    const textColor = await page.$eval('p', p =>
+      window.getComputedStyle(p).getPropertyValue('color'),
+    );
+
+    expect(textColor).toBe('rgb(255, 0, 0)');
+
+    await clear();
+  });
+});
diff --git a/tests/integration/css/tests/utils.ts b/tests/integration/tailwindcss/tests/utils.ts
similarity index 63%
rename from tests/integration/css/tests/utils.ts
rename to tests/integration/tailwindcss/tests/utils.ts
index 670213b1469c..96568eb335bb 100644
--- a/tests/integration/css/tests/utils.ts
+++ b/tests/integration/tailwindcss/tests/utils.ts
@@ -1,5 +1,12 @@
 import path from 'path';
 import { fs, glob } from '@modern-js/utils';
+import puppeteer from 'puppeteer';
+import {
+  getPort,
+  killApp,
+  launchApp,
+  launchOptions,
+} from '../../../utils/modernTestUtils';
 
 export const fixtures = path.resolve(__dirname, '../fixtures');
 
@@ -29,3 +36,22 @@ export const getPreCssFiles = (appDir: string, ext: string) =>
   glob
     .sync(path.resolve(appDir, 'dist/**/*'))
     .filter(filepath => new RegExp(`\\.${ext}$`).test(filepath));
+
+export async function launchAppWithPage(appDir: string) {
+  const port = await getPort();
+  const app = await launchApp(appDir, port);
+  const browser = await puppeteer.launch(launchOptions as any);
+  const page = await browser.newPage();
+
+  await page.goto(`http://localhost:${port}`);
+
+  return {
+    app,
+    page,
+    async clear() {
+      await killApp(app);
+      await page.close();
+      await browser.close();
+    },
+  };
+}

From 8341efa2ffb76acdea82164e89f241dc58a9d689 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 13:59:39 +0800
Subject: [PATCH 2/8] chore: add changeset

---
 .changeset/modern-pants-sort.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/modern-pants-sort.md

diff --git a/.changeset/modern-pants-sort.md b/.changeset/modern-pants-sort.md
new file mode 100644
index 000000000000..5a8c4625d47b
--- /dev/null
+++ b/.changeset/modern-pants-sort.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/plugin-tailwindcss': patch
+---
+
+feat(plugin-tailwind): automatically read tailwind config file
+
+feat(plugin-tailwind): 自动读取 tailwind config 文件

From cc983ee341b6e387e374ce9ae98244ced406a143 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 14:05:54 +0800
Subject: [PATCH 3/8] docs: update Tailwind CSS Autocomplete

---
 .../docs/en/guides/basic-features/css.mdx     | 22 +++----------------
 .../docs/zh/guides/basic-features/css.mdx     | 21 ++----------------
 2 files changed, 5 insertions(+), 38 deletions(-)

diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
index 9d56494e8752..feec7f001723 100644
--- a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
@@ -107,33 +107,17 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
 
-You can follow the steps below to enable the autocompletion feature:
+You can follow the steps below to enable the autocomplete feature:
 
 1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
-2. Create a `tailwind.config.ts` file in the root directory of your project and write the desired Tailwind CSS configuration.
+2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
 
 ```ts title="tailwind.config.ts"
 export default {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
 };
 ```
 
-3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created and pass it to [tools.tailwindcss](/configure/app/tools/tailwindcss), so that Modern.js can recognize the Tailwind CSS configuration correctly.
-
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
-
-export default defineConfig({
-  tools: {
-    tailwindcss: tailwindConfig,
-  },
-});
-```
-
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
index 74f7729e137e..bf2a01c9006e 100644
--- a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
@@ -110,31 +110,14 @@ Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tail
 你可以参考以下步骤来启动自动补全功能：
 
 1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
-2. 在项目的根目录创建 `tailwind.config.ts` 文件，并写入你需要的 Tailwind CSS 配置。
+2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
 ```ts title="tailwind.config.ts"
 export default {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
 };
 ```
 
-3. 在 `modern.config.ts` 中通过 [tools.tailwindcss](/configure/app/tools/tailwindcss) 引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
-
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
-
-export default defineConfig({
-  tools: {
-    tailwindcss: tailwindConfig,
-  },
-});
-```
-
-
 ### Tailwind CSS 版本
 
 Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。

From 0f712f6c6f98dd755f2731d3d3116dcec3909d78 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 14:32:50 +0800
Subject: [PATCH 4/8] docs: add usage guide for tailwind config

---
 .../en/configure/app/tools/tailwindcss.mdx    |  5 ++-
 .../docs/en/guides/basic-features/css.mdx     | 36 +++++++++++++++----
 .../zh/configure/app/tools/tailwindcss.mdx    |  7 ++--
 .../docs/zh/guides/basic-features/css.mdx     | 36 +++++++++++++++----
 packages/document/main-doc/modern.config.ts   |  6 ++++
 5 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
index 764388190954..8e53f360c144 100644
--- a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
+++ b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
@@ -51,6 +51,9 @@ export default {
 
 ### Notes
 
-Please note that if you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
+Please note:
+
+- If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+- If you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
 
 The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
index feec7f001723..ffda1204f194 100644
--- a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
@@ -103,14 +103,11 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 :::
 
-### Tailwind CSS Autocomplete
+### Configuring Tailwind CSS
 
-Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+In Modern.js, you have two ways to configure Tailwind CSS:
 
-You can follow the steps below to enable the autocomplete feature:
-
-1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
-2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
+1. Using the `tailwind.config.{ts,js}` file, which follows the official usage of Tailwind CSS. Please refer to ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) for more details.
 
 ```ts title="tailwind.config.ts"
 export default {
@@ -118,6 +115,33 @@ export default {
 };
 ```
 
+:::tip
+Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+:::
+
+2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
+  },
+};
+```
+
+If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+
+### Tailwind CSS Autocomplete
+
+Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+
+You can follow the steps below to enable the autocomplete feature:
+
+1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
+2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
+
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
index 2d3bb832987a..3b495a328f03 100644
--- a/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
+++ b/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
@@ -17,7 +17,7 @@ const tailwind = {
 };
 ```
 
-对应 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置。
+用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。
 
 ### Function 类型
 
@@ -53,6 +53,9 @@ export default {
 
 ### 注意事项
 
-注意，如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
+注意：
+
+- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+- 如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
 
 其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
index bf2a01c9006e..4b991ed48846 100644
--- a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
@@ -103,14 +103,11 @@ const App = () => (
 
 :::
 
-### Tailwind CSS 自动补全
-
-Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+### 配置 Tailwind CSS
 
-你可以参考以下步骤来启动自动补全功能：
+在 Modern.js 中，你有两种方式来配置 Tailwind CSS：
 
-1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
-2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
+1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
 
 ```ts title="tailwind.config.ts"
 export default {
@@ -118,6 +115,33 @@ export default {
 };
 ```
 
+:::tip
+请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+:::
+
+2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
+  },
+};
+```
+
+如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+
+### Tailwind CSS 自动补全
+
+Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+
+你可以参考以下步骤来启动自动补全功能：
+
+1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
+2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
+
 ### Tailwind CSS 版本
 
 Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。
diff --git a/packages/document/main-doc/modern.config.ts b/packages/document/main-doc/modern.config.ts
index 2d3d6fee99ac..64b672305e27 100644
--- a/packages/document/main-doc/modern.config.ts
+++ b/packages/document/main-doc/modern.config.ts
@@ -133,6 +133,12 @@ export default defineConfig({
       // exclude document fragments from routes
       exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
     },
+    replaceRules: [
+      {
+        search: /MAJOR_VERSION/g,
+        replace: '2',
+      },
+    ],
     builderConfig: {
       output: {
         disableTsChecker: true,

From b81008db39c574e51c7f472c85167245b1f1e162 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 14:33:47 +0800
Subject: [PATCH 5/8] docs: add comment

---
 .../document/main-doc/docs/en/guides/basic-features/css.mdx   | 2 +-
 .../document/main-doc/docs/zh/guides/basic-features/css.mdx   | 2 +-
 packages/document/main-doc/modern.config.ts                   | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
index ffda1204f194..fcf0f4734d98 100644
--- a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
@@ -116,7 +116,7 @@ export default {
 ```
 
 :::tip
-Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+Please upgrade Modern.js to version >= FRAMEWORK_MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
 :::
 
 2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
index 4b991ed48846..45354ada5a23 100644
--- a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
@@ -116,7 +116,7 @@ export default {
 ```
 
 :::tip
-请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+请升级 Modern.js 到 >= FRAMEWORK_MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
 :::
 
 2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
diff --git a/packages/document/main-doc/modern.config.ts b/packages/document/main-doc/modern.config.ts
index 64b672305e27..240e9ad62050 100644
--- a/packages/document/main-doc/modern.config.ts
+++ b/packages/document/main-doc/modern.config.ts
@@ -135,7 +135,9 @@ export default defineConfig({
     },
     replaceRules: [
       {
-        search: /MAJOR_VERSION/g,
+        // The framework major version is different inside the ByteDance,
+        // so we use a flag to define it.
+        search: /FRAMEWORK_MAJOR_VERSION/g,
         replace: '2',
       },
     ],

From 0dbe902078a7e623564f7c372cfca198b8dc4631 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 15:07:07 +0800
Subject: [PATCH 6/8] docs: update

---
 .../en/configure/app/tools/tailwindcss.mdx    |   2 +
 .../docs/en/guides/basic-features/css.mdx     |   2 +-
 .../docs/zh/guides/basic-features/css.mdx     |   2 +-
 packages/document/main-doc/modern.config.ts   |   4 +-
 .../docs/en/api/config/build-config.mdx       |  14 +-
 .../en/guide/basic/use-micro-generator.md     |  25 +-
 .../en/guide/best-practices/components.mdx    | 199 +-----------
 .../guide/best-practices/use-tailwindcss.mdx  | 258 +++++++++++++++
 .../docs/zh/api/config/build-config.mdx       |  14 +-
 .../zh/guide/basic/use-micro-generator.md     |  21 +-
 .../zh/guide/best-practices/components.mdx    | 197 +-----------
 .../guide/best-practices/use-tailwindcss.mdx  | 258 +++++++++++++++
 packages/document/module-doc/modern.config.ts |   8 +
 pnpm-lock.yaml                                | 298 +++++++++++-------
 14 files changed, 734 insertions(+), 568 deletions(-)
 create mode 100644 packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
 create mode 100644 packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx

diff --git a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
index 8e53f360c144..4a1cc34165f0 100644
--- a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
+++ b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
@@ -17,6 +17,8 @@ const tailwind = {
 };
 ```
 
+Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+
 ### Function Type
 
 When `tools.tailwindcss`'s type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
index fcf0f4734d98..ffda1204f194 100644
--- a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
@@ -116,7 +116,7 @@ export default {
 ```
 
 :::tip
-Please upgrade Modern.js to version >= FRAMEWORK_MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
 :::
 
 2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
index 45354ada5a23..4b991ed48846 100644
--- a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
@@ -116,7 +116,7 @@ export default {
 ```
 
 :::tip
-请升级 Modern.js 到 >= FRAMEWORK_MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
 :::
 
 2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
diff --git a/packages/document/main-doc/modern.config.ts b/packages/document/main-doc/modern.config.ts
index 240e9ad62050..e0cc02456f33 100644
--- a/packages/document/main-doc/modern.config.ts
+++ b/packages/document/main-doc/modern.config.ts
@@ -135,9 +135,9 @@ export default defineConfig({
     },
     replaceRules: [
       {
-        // The framework major version is different inside the ByteDance,
+        // The major version is different inside the ByteDance,
         // so we use a flag to define it.
-        search: /FRAMEWORK_MAJOR_VERSION/g,
+        search: /MAJOR_VERSION/g,
         replace: '2',
       },
     ],
diff --git a/packages/document/module-doc/docs/en/api/config/build-config.mdx b/packages/document/module-doc/docs/en/api/config/build-config.mdx
index 7228606e9a4e..04ff7df7ade4 100644
--- a/packages/document/module-doc/docs/en/api/config/build-config.mdx
+++ b/packages/document/module-doc/docs/en/api/config/build-config.mdx
@@ -1086,13 +1086,10 @@ For detailed configuration see [postcss-modules](https://github.com/madyankin/po
 
 ## style.tailwindcss
 
-tailwindcss related configuration
+Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).
 
 - **Type**: `object | Function`
-- **Default**: `see configuration details below`
-
-<details>
-  <summary>Tailwind CSS configuration details</summary>
+- **Default**:
 
 ```js title="modern.config.ts"
 const tailwind = {
@@ -1104,8 +1101,6 @@ const tailwind = {
 };
 ```
 
-</details>
-
 When the value is of type `object`, it is merged with the default configuration via `Object.assign`.
 
 When the value is of type `Function`, the object returned by the function is merged with the default configuration via `Object.assign`.
@@ -1114,7 +1109,10 @@ The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwi
 
 ### Notes
 
-Please note that if you are using the [designSystem](/api/config/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
+Please note that:
+
+- If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+- If you are using the [designSystem](/api/config/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
 
 The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
 
diff --git a/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md b/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md
index d6561ede7aec..d06dfdd126cc 100644
--- a/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md
+++ b/packages/document/module-doc/docs/en/guide/basic/use-micro-generator.md
@@ -58,30 +58,11 @@ For more information on how to start Storybook and how to use it, check out the
 - [`modern dev`](/en/guide/basic/command-preview#modern-dev)
 - [`using Storybook`](/en/guide/basic/using-storybook)
 
-## Tailwind CSS support
+## Tailwind CSS Support
 
-This can be enabled when we want to add [Tailwind CSS](https://v2.tailwindcss.com/) support to our project. Tailwind CSS is a CSS library that provides out-of-the-box styling.
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-For more information on how to use Tailwind CSS in your module projects, check out.
-
-<!-- 链接待补充 -->
-
-- Using Tailwind CSS
-
-:::tip
-After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    tailwindPlugin(),
-  ],
-});
-```
-:::
+If you want to use Tailwind CSS for a project, you can refer to ["Using Tailwind CSS"](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css).
 
 ## Modern.js Runtime API
 
diff --git a/packages/document/module-doc/docs/en/guide/best-practices/components.mdx b/packages/document/module-doc/docs/en/guide/best-practices/components.mdx
index 933a318c526b..50d7e3b6a8bd 100644
--- a/packages/document/module-doc/docs/en/guide/best-practices/components.mdx
+++ b/packages/document/module-doc/docs/en/guide/best-practices/components.mdx
@@ -164,204 +164,7 @@ body {
 
 ### Tailwind CSS
 
-The module project supports the development of component styles using Tailwind CSS.
-
-By default, this feature is not enabled in the module project, you need to enable it as follows.
-
-1. The Tailwind CSS feature can be enabled by executing the `new` command in the project root directory.
-
-```text title="Terminal"
-pnpm run new
-
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable Tailwind CSS
-```
-
-2. Once successfully enabled, you will see that a new dependency has been added to `package.json`.
-
-```json title="./package.json"
-{
-  "devDependencies": {
-    "@modern-js/plugin-tailwindcss": "x.y.z"
-  }
-}
-```
-
-3. Tailwind CSS offers two ways to use it.
-
-#### HTML class
-
-Tailwind CSS supports adding styles to HTML tags by using class names. **When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world</div>;
-};
-```
-
-Style product (This is a bundle build):
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-#### `@apply`
-
-Tailwind CSS provides the [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write.
-
-`@apply` can be used in CSS, Less, and Sass.
-
-```css
-.btn {
-  @apply font-bold py-2 px-4 rounded;
-}
-```
-
-However, there are some things to keep in mind when using Less and Sass.
-
-##### Sass
-
-When using Tailwind with Sass, the presence of `!important` after `@apply` requires interpolation to get Sass to compile correctly.
-
-- It does not work properly:
-
-```sass
-.alert {
-  @apply bg-red-500 !important;
-}
-```
-
-- Can work properly:
-
-```sass
-.alert {
-  @apply bg-red-500 #{!important};
-}
-```
-
-##### Less
-
-When using Tailwind with Less, you cannot nest Tailwind's `@screen` directive.
-
-- It does not work properly:
-
-```less
-.card {
-  @apply rounded-none;
-
-  @screen sm {
-    @apply rounded-lg;
-  }
-}
-```
-
-- Instead, use regular media queries and the `theme()` function to reference your screen size, or simply don't nest your `@screen` directive.
-
-```less title="Method One"
-// Use a regular media query and theme()
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-```less title="Method Two"
-// Use the @screen directive at the top-level
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-#### Recommended method
-
-**It is recommended to develop styles in the way specified by `@apply`, so that only styles inlined by directives are included in the style product. **
-
-When adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles.
-
-#### The difference between bundle and bundleless build products
-
-For the following code, there is a big difference between the bundle and bundleless modes of building products.
-
-> The so-called bundle and bundleless can be found in ["Bundle and Bundleless"](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world11</div>;
-};
-```
-
-In Bundle mode, third-party dependencies are bundled in.
-
-For styles, a separate output file is generated, and there is no code related to importing styles in the JS output files.
-
-If you need to inject styles into JS output files, you can enable the [`style.inject`](/en/api/config/build-config#styleinject) option.
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-``` js ./dist/es/index.js
-// src/index.tsx
-import { jsx } from "react/jsx-runtime";
-var src_default = () => {
-  return /* @__PURE__ */ jsx("div", {
-    className: "bg-black text-white",
-    children: "hello world11"
-  });
-};
-export {
-  src_default as default
-};
-```
-
-In Bundleless mode, no third-party dependencies are bundled, and no style artifacts are generated at this time.
-
-```js title="./dist/es/index.js"
-import { jsx } from 'react/jsx-runtime';
-import 'tailwindcss/utilities.css';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
+Please refer to ["Using Tailwind CSS"](/guide/best-practices/use-tailwindcss.html) for detailed usage.
 
 ### CSS Modules
 
diff --git a/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
new file mode 100644
index 000000000000..2e81b9bacb33
--- /dev/null
+++ b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
@@ -0,0 +1,258 @@
+---
+sidebar_position: 2
+---
+
+# Using Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
+
+Module Tools supports developing component styles using Tailwind CSS.
+
+## Enabling Tailwind CSS
+
+By default, Module Tools does not have this feature enabled. You can enable it by following the steps below.
+
+1. Execute the `new` command in the project root directory to enable Tailwind CSS.
+
+```text title="Terminal"
+pnpm run new
+
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
+```
+
+2. After successful enabling, you will see a new dependency added to `package.json`.
+
+```json title="./package.json"
+{
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "x.y.z"
+  }
+}
+```
+
+3. Finally, you need to manually register the `tailwindcssPlugin` in the configuration file:
+
+```ts title="modern.config.ts"
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [moduleTools(), tailwindPlugin()],
+});
+```
+
+## Configuring Tailwind CSS
+
+In Module Tools, you have two ways to configure Tailwind CSS:
+
+1. Using the `tailwind.config.{ts,js}` file, which follows the official usage of Tailwind CSS. Please refer to ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) for more details.
+
+```ts title="tailwind.config.ts"
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
+```
+
+:::tip
+Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+:::
+
+2. Using the [style.tailwindcss](/api/config/build-config.html#styletailwindcss) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
+  },
+};
+```
+
+If you are using both the `tailwind.config.{ts,js}` file and `style.tailwindcss` option, the configuration defined in `style.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+
+### Tailwind CSS Autocomplete
+
+Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+
+You can follow the steps below to enable the autocomplete feature:
+
+1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
+2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
+
+## Usage Introduction
+
+Tailwind CSS provides two ways of usage:
+
+### HTML Class Names
+
+Tailwind CSS supports adding styles by using class names on HTML tags. **When using HTML class names, make sure to import the corresponding CSS file of Tailwind CSS.**
+
+```tsx title="./src/index.tsx"
+import 'tailwindcss/utilities.css';
+
+export default () => {
+  return <div className="bg-black text-white">hello world</div>;
+};
+```
+
+Generated styles (after bundling):
+
+```css title="./dist/es/index.css"
+/* node_modules/tailwindcss/utilities.css */
+.table {
+  display: table;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+/** some more... */
+```
+
+### `@apply`
+
+Tailwind CSS provides the [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) directive, which allows us to inline the styles provided by Tailwind CSS into our own styles.
+
+`@apply` can be used in CSS, Less, and Sass.
+
+```css
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+```
+
+However, there are some considerations when using it with Less and Sass:
+
+#### Sass
+
+When using Tailwind with Sass and there is an `!important` after `@apply`, interpolation should be used to ensure Sass compiles correctly.
+
+- Won't work as expected:
+
+```sass
+.alert {
+  @apply bg-red-500 !important;
+}
+```
+
+- Will work as expected:
+
+```sass
+.alert {
+  @apply bg-red-500 #{!important};
+}
+```
+
+#### Less
+
+When using Tailwind with Less, you cannot nest Tailwind's `@screen` directive.
+
+- Won't work as expected:
+
+```less
+.card {
+  @apply rounded-none;
+
+  @screen sm {
+    @apply rounded-lg;
+  }
+}
+```
+
+- Instead, use regular media queries and the `theme()` function to reference your screen sizes or simply avoid nesting your `@screen` directive.
+
+```less title="Method 1"
+// Use a regular media query and theme()
+.card {
+  @apply rounded-none;
+
+  @media (min-width: theme('screens.sm')) {
+    @apply rounded-lg;
+  }
+}
+```
+
+```less title="Method 2"
+// Use the @screen directive at the top-level
+.card {
+  @apply rounded-none;
+
+  @media (min-width: theme('screens.sm')) {
+    @apply rounded-lg;
+  }
+}
+```
+
+### Recommended Approach
+
+**It is recommended to develop styles using the `@apply` directive so that the resulting styles only include the inline styles specified by the directive.**
+
+When adding styles using HTML class names, by default, Tailwind includes not only the styles corresponding to the class names but also additional style code. Although these additional code may not affect the styles themselves.
+
+### Difference between Bundle and Bundleless Builds
+
+For the following code, there is a significant difference in the build output between bundle and bundleless modes.
+
+> For more information about bundle and bundleless, refer to [Bundle and Bundleless](/guide/advance/in-depth-about-build#bundle-和-bundleless)
+
+```tsx title="./src/index.tsx"
+import 'tailwindcss/utilities.css';
+
+export default () => {
+  return <div className="bg-black text-white">hello world11</div>;
+};
+```
+
+In the Bundle mode, third-party dependencies are bundled together.
+
+For styles, a separate output file is generated, and there is no import code related to styles in the JS output file.
+
+To inject styles into the JS output, you can enable the [`style.inject`](/api/config/build-config#styleinject) option.
+
+```css title="./dist/es/index.css"
+/* node_modules/tailwindcss/utilities.css */
+.table {
+  display: table;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+/** some more... */
+```
+
+```js title="./dist/es/index.js"
+// src/index.tsx
+import { jsx } from 'react/jsx-runtime';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black text-white',
+    children: 'hello world11',
+  });
+};
+export { src_default as default };
+```
+
+In Bundleless mode, third-party dependencies are not bundled together, and no style artifacts will be generated.
+
+```js title="./dist/es/index.js"
+import { jsx } from 'react/jsx-runtime';
+import 'tailwindcss/utilities.css';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black text-white',
+    children: 'hello world11',
+  });
+};
+export { src_default as default };
+```
diff --git a/packages/document/module-doc/docs/zh/api/config/build-config.mdx b/packages/document/module-doc/docs/zh/api/config/build-config.mdx
index e2bd9f10424a..340b2907f2e1 100644
--- a/packages/document/module-doc/docs/zh/api/config/build-config.mdx
+++ b/packages/document/module-doc/docs/zh/api/config/build-config.mdx
@@ -1086,13 +1086,10 @@ export default defineConfig({
 
 ## style.tailwindcss
 
-Tailwind CSS 相关配置。
+用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。
 
 - 类型： `object | Function`
-- 默认值： `见下方配置详情`
-
-<details>
-  <summary>Tailwind CSS 配置详情</summary>
+- 默认值：
 
 ```js title="modern.config.ts"
 const tailwind = {
@@ -1104,8 +1101,6 @@ const tailwind = {
 };
 ```
 
-</details>
-
 值为 `object` 类型时，与默认配置通过 `Object.assign` 合并。
 
 值为 `Function` 类型时，函数返回的对象与默认配置通过 `Object.assign` 合并。
@@ -1114,7 +1109,10 @@ const tailwind = {
 
 ### 注意事项
 
-注意，如果你同时使用了 [designSystem](/api/config/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
+注意：
+
+- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+- 如果你同时使用了 [designSystem](/api/config/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
 
 其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
 
diff --git a/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md b/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md
index 85dfbd090468..58854dcface8 100644
--- a/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md
+++ b/packages/document/module-doc/docs/zh/guide/basic/use-micro-generator.md
@@ -59,26 +59,9 @@ export default defineConfig({
 
 ## Tailwind CSS 支持
 
-当我们想要为项目增加 [Tailwind CSS](https://v2.tailwindcss.com/) 支持的时候，可以启动这个功能。Tailwind CSS 是一个 CSS 库，提供开箱即用的样式。
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-关于如何在模块工程里使用 Tailwind CSS，可以查看：
-
-- [使用 Tailwind CSS](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css)
-
-:::tip
-在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    tailwindPlugin(),
-  ],
-});
-```
-:::
+如果你想要在项目使用 [Tailwind CSS](https://tailwindcss.com/)，可以参考 [「使用 Tailwind CSS」](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css)。
 
 ## 启动 Modern.js Runtime API
 
diff --git a/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx b/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx
index 83173c82577f..ce86d78d18ed 100644
--- a/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx
+++ b/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx
@@ -168,202 +168,7 @@ body {
 
 ### Tailwind CSS
 
-模块工程支持使用 Tailwind CSS 开发组件样式。
-
-默认情况下，模块工程没有开启该功能，需要按照下面的方式开启它。
-
-1. 在项目根目录下执行 `new` 命令，可以开启 Tailwind CSS 功能。
-
-```text title="终端"
-pnpm run new
-
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用 「Tailwind CSS」 支持
-```
-
-2. 成功开启后，会看到 `package.json` 中新增了依赖。
-
-```json title="./package.json"
-{
-  "devDependencies": {
-    "@modern-js/plugin-tailwindcss": "x.y.z"
-  }
-}
-```
-
-3. Tailwind CSS 提供了两种使用方式：
-
-#### HTML 类名
-
-Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。**当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。**
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world</div>;
-};
-```
-
-样式产物（此时是 bundle 构建）：
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-#### `@apply`
-
-Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) 指令，可以通过它将 Tailwind CSS 提供的样式内联到我们编写的样式中。
-
-`@apply` 可以用于 CSS、Less、Sass 中。
-
-```css
-.btn {
-  @apply font-bold py-2 px-4 rounded;
-}
-```
-
-但是使用过程中，对于 Less 和 Sass 有些情况需要注意：
-
-##### Sass
-
-当将 Tailwind 与 Sass 一起使用时，`@apply` 后面存在 `!important` 的时候，需要使用插值来让 Sass 正确编译。
-
-- 不能正常工作：
-
-```sass
-.alert {
-  @apply bg-red-500 !important;
-}
-```
-
-- 能够正常工作：
-
-```sass
-.alert {
-  @apply bg-red-500 #{!important};
-}
-```
-
-##### Less
-
-在与 Less 一起使用 Tailwind 时，你不能嵌套 Tailwind 的 `@screen` 指令。
-
-- 不能正常工作：
-
-```less
-.card {
-  @apply rounded-none;
-
-  @screen sm {
-    @apply rounded-lg;
-  }
-}
-```
-
-- 相反，使用常规的媒体查询和 `theme()` 函数来引用你的屏幕尺寸，或者干脆不要嵌套你的 `@screen` 指令。
-
-```less title="方法一"
-// Use a regular media query and theme()
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-```less title="方法二"
-// Use the @screen directive at the top-level
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-#### 推荐方式
-
-**推荐使用 `@apply` 指定的方式开发样式，这样在样式产物中仅包含通过指令内联的样式。**
-
-当使用 HTML 类名的方式添加样式的时候，默认情况下 Tailwind 不仅会将本身类名对应的样式加入产物中，同时还会有额外的样式代码存在，虽然这些代码可能不会对本身的样式产生影响。
-
-#### bundle 和 bundleless 构建产物区别
-
-对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。
-
-> 所谓 bundle 和 bundleless 可以查看 [「Bundle 和 Bundleless」](/guide/advance/in-depth-about-build#bundle-和-bundleless)
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world11</div>;
-};
-```
-
-Bundle 模式下，会将第三方依赖打包进来。
-
-对于样式则会生成一份单独的产物文件，并且在 JS 产物文件中并不会存在导入样式的相关代码。
-
-如果需要将样式注入 JS 产物中，可以开启 [`style.inject`](/api/config/build-config#styleinject) 选项。
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-```js title="./dist/es/index.js"
-// src/index.tsx
-import { jsx } from 'react/jsx-runtime';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
-
-Bundleless 模式下，并不会将第三方依赖打包进来，此时不会有样式产物生成。
-
-```js title="./dist/es/index.js"
-import { jsx } from 'react/jsx-runtime';
-import 'tailwindcss/utilities.css';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
+请参考 [「使用 Tailwind CSS」](/guide/best-practices/use-tailwindcss.html) 来了解相关用法。
 
 ### CSS Modules
 
diff --git a/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
new file mode 100644
index 000000000000..2b0d91e56c90
--- /dev/null
+++ b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
@@ -0,0 +1,258 @@
+---
+sidebar_position: 2
+---
+
+# 使用 Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
+
+Module Tools 支持使用 Tailwind CSS 开发组件样式。
+
+## 启用 Tailwind CSS
+
+默认情况下，Module Tools 没有开启该功能，需要按照下面的方式开启它。
+
+1. 在项目根目录下执行 `new` 命令，可以开启 Tailwind CSS 功能。
+
+```text title="终端"
+pnpm run new
+
+? 请选择你想要的操作：启用可选功能
+? 请选择功能名称：启用 「Tailwind CSS」 支持
+```
+
+2. 成功开启后，会看到 `package.json` 中新增了依赖。
+
+```json title="./package.json"
+{
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "x.y.z"
+  }
+}
+```
+
+3. 最后，需要手动在配置文件中注册 `tailwindcssPlugin`:
+
+```ts title="modern.config.ts"
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [moduleTools(), tailwindPlugin()],
+});
+```
+
+## 配置 Tailwind CSS
+
+在 Module Tools 中，你有两种方式来配置 Tailwind CSS：
+
+1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
+
+```ts title="tailwind.config.ts"
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
+```
+
+:::tip
+请升级 Module Tools 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+:::
+
+2. 使用 [style.tailwindcss](/api/config/build-config.html#styletailwindcss) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
+
+```ts title="modern.config.ts"
+export default {
+  style: {
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
+  },
+};
+```
+
+如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `style.tailwindcss` 选项，那么 `style.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+
+## Tailwind CSS 自动补全
+
+Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+
+你可以参考以下步骤来启动自动补全功能：
+
+1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
+2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
+
+## 用法介绍
+
+Tailwind CSS 提供了两种使用方式：
+
+### HTML 类名
+
+Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。**当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。**
+
+```tsx title="./src/index.tsx"
+import 'tailwindcss/utilities.css';
+
+export default () => {
+  return <div className="bg-black text-white">hello world</div>;
+};
+```
+
+样式产物（此时是 bundle 构建）：
+
+```css title="./dist/es/index.css"
+/* node_modules/tailwindcss/utilities.css */
+.table {
+  display: table;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+/** some more... */
+```
+
+### `@apply`
+
+Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) 指令，可以通过它将 Tailwind CSS 提供的样式内联到我们编写的样式中。
+
+`@apply` 可以用于 CSS、Less、Sass 中。
+
+```css
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+```
+
+但是使用过程中，对于 Less 和 Sass 有些情况需要注意：
+
+#### Sass
+
+当将 Tailwind 与 Sass 一起使用时，`@apply` 后面存在 `!important` 的时候，需要使用插值来让 Sass 正确编译。
+
+- 不能正常工作：
+
+```sass
+.alert {
+  @apply bg-red-500 !important;
+}
+```
+
+- 能够正常工作：
+
+```sass
+.alert {
+  @apply bg-red-500 #{!important};
+}
+```
+
+#### Less
+
+在与 Less 一起使用 Tailwind 时，你不能嵌套 Tailwind 的 `@screen` 指令。
+
+- 不能正常工作：
+
+```less
+.card {
+  @apply rounded-none;
+
+  @screen sm {
+    @apply rounded-lg;
+  }
+}
+```
+
+- 相反，使用常规的媒体查询和 `theme()` 函数来引用你的屏幕尺寸，或者干脆不要嵌套你的 `@screen` 指令。
+
+```less title="方法一"
+// Use a regular media query and theme()
+.card {
+  @apply rounded-none;
+
+  @media (min-width: theme('screens.sm')) {
+    @apply rounded-lg;
+  }
+}
+```
+
+```less title="方法二"
+// Use the @screen directive at the top-level
+.card {
+  @apply rounded-none;
+
+  @media (min-width: theme('screens.sm')) {
+    @apply rounded-lg;
+  }
+}
+```
+
+### 推荐方式
+
+**推荐使用 `@apply` 指定的方式开发样式，这样在样式产物中仅包含通过指令内联的样式。**
+
+当使用 HTML 类名的方式添加样式的时候，默认情况下 Tailwind 不仅会将本身类名对应的样式加入产物中，同时还会有额外的样式代码存在，虽然这些代码可能不会对本身的样式产生影响。
+
+### bundle 和 bundleless 构建产物区别
+
+对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。
+
+> 所谓 bundle 和 bundleless 可以查看 [「Bundle 和 Bundleless」](/guide/advance/in-depth-about-build#bundle-和-bundleless)
+
+```tsx title="./src/index.tsx"
+import 'tailwindcss/utilities.css';
+
+export default () => {
+  return <div className="bg-black text-white">hello world11</div>;
+};
+```
+
+Bundle 模式下，会将第三方依赖打包进来。
+
+对于样式则会生成一份单独的产物文件，并且在 JS 产物文件中并不会存在导入样式的相关代码。
+
+如果需要将样式注入 JS 产物中，可以开启 [`style.inject`](/api/config/build-config#styleinject) 选项。
+
+```css title="./dist/es/index.css"
+/* node_modules/tailwindcss/utilities.css */
+.table {
+  display: table;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+/** some more... */
+```
+
+```js title="./dist/es/index.js"
+// src/index.tsx
+import { jsx } from 'react/jsx-runtime';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black text-white',
+    children: 'hello world11',
+  });
+};
+export { src_default as default };
+```
+
+Bundleless 模式下，并不会将第三方依赖打包进来，此时不会有样式产物生成。
+
+```js title="./dist/es/index.js"
+import { jsx } from 'react/jsx-runtime';
+import 'tailwindcss/utilities.css';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black text-white',
+    children: 'hello world11',
+  });
+};
+export { src_default as default };
+```
diff --git a/packages/document/module-doc/modern.config.ts b/packages/document/module-doc/modern.config.ts
index 29e40946b664..ad08ac0e982f 100644
--- a/packages/document/module-doc/modern.config.ts
+++ b/packages/document/module-doc/modern.config.ts
@@ -108,6 +108,14 @@ export default defineConfig({
         text: 'Edit this page on GitHub',
       },
     },
+    replaceRules: [
+      {
+        // The major version is different inside the ByteDance,
+        // so we use a flag to define it.
+        search: /MAJOR_VERSION/g,
+        replace: '2',
+      },
+    ],
     builderConfig: {
       dev: {
         startUrl: 'http://localhost:<port>/module-tools/',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62e1158a4f77..985b3ca82eb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7482,117 +7482,6 @@ importers:
         specifier: ^14
         version: 14.18.35
 
-  tests/integration/css:
-    dependencies:
-      '@types/jest':
-        specifier: ^29
-        version: 29.2.6
-      '@types/node':
-        specifier: ^14
-        version: 14.18.35
-
-  tests/integration/css/fixtures/tailwindcss-v2:
-    dependencies:
-      '@modern-js/app-tools':
-        specifier: workspace:*
-        version: link:../../../../../packages/solutions/app-tools
-      '@modern-js/plugin-tailwindcss':
-        specifier: workspace:*
-        version: link:../../../../../packages/cli/plugin-tailwind
-      '@modern-js/runtime':
-        specifier: workspace:*
-        version: link:../../../../../packages/runtime/plugin-runtime
-      autoprefixer:
-        specifier: 10.4.13
-        version: 10.4.13(postcss@8.4.27)
-      postcss:
-        specifier: 8.4.27
-        version: 8.4.27
-      react:
-        specifier: ^18
-        version: 18.2.0
-      react-dom:
-        specifier: ^18
-        version: 18.2.0(react@18.2.0)
-      tailwindcss:
-        specifier: ^2
-        version: 2.2.19(autoprefixer@10.4.13)(postcss@8.4.27)(ts-node@10.9.1)
-
-  tests/integration/css/fixtures/tailwindcss-v3:
-    dependencies:
-      '@modern-js/app-tools':
-        specifier: workspace:*
-        version: link:../../../../../packages/solutions/app-tools
-      '@modern-js/plugin-tailwindcss':
-        specifier: workspace:*
-        version: link:../../../../../packages/cli/plugin-tailwind
-      '@modern-js/runtime':
-        specifier: workspace:*
-        version: link:../../../../../packages/runtime/plugin-runtime
-      postcss:
-        specifier: 8.4.27
-        version: 8.4.27
-      react:
-        specifier: ^18
-        version: 18.2.0
-      react-dom:
-        specifier: ^18
-        version: 18.2.0(react@18.2.0)
-      tailwindcss:
-        specifier: ^3.3.3
-        version: 3.3.3(ts-node@10.9.1)
-
-  tests/integration/css/fixtures/twin.macro-v2:
-    dependencies:
-      '@modern-js/app-tools':
-        specifier: workspace:*
-        version: link:../../../../../packages/solutions/app-tools
-      '@modern-js/plugin-tailwindcss':
-        specifier: workspace:*
-        version: link:../../../../../packages/cli/plugin-tailwind
-      '@modern-js/runtime':
-        specifier: workspace:*
-        version: link:../../../../../packages/runtime/plugin-runtime
-      postcss:
-        specifier: 8.4.27
-        version: 8.4.27
-      react:
-        specifier: ^18
-        version: 18.2.0
-      react-dom:
-        specifier: ^18
-        version: 18.2.0(react@18.2.0)
-      twin.macro:
-        specifier: ^2
-        version: 2.8.2(ts-node@10.9.1)
-
-  tests/integration/css/fixtures/twin.macro-v3:
-    dependencies:
-      '@modern-js/app-tools':
-        specifier: workspace:*
-        version: link:../../../../../packages/solutions/app-tools
-      '@modern-js/plugin-tailwindcss':
-        specifier: workspace:*
-        version: link:../../../../../packages/cli/plugin-tailwind
-      '@modern-js/runtime':
-        specifier: workspace:*
-        version: link:../../../../../packages/runtime/plugin-runtime
-      postcss:
-        specifier: 8.4.27
-        version: 8.4.27
-      react:
-        specifier: ^18
-        version: 18.2.0
-      react-dom:
-        specifier: ^18
-        version: 18.2.0(react@18.2.0)
-      tailwindcss:
-        specifier: ^3.3.3
-        version: 3.3.3(ts-node@10.9.1)
-      twin.macro:
-        specifier: ^3
-        version: 3.1.0(tailwindcss@3.3.3)
-
   tests/integration/custom-render:
     dependencies:
       '@modern-js/runtime':
@@ -9195,6 +9084,189 @@ importers:
         specifier: workspace:*
         version: link:../../../../../packages/cli/plugin-swc
 
+  tests/integration/tailwindcss:
+    dependencies:
+      '@types/jest':
+        specifier: ^29
+        version: 29.2.6
+      '@types/node':
+        specifier: ^14
+        version: 14.18.35
+
+  tests/integration/tailwindcss/fixtures/tailwindcss-v2:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      autoprefixer:
+        specifier: 10.4.13
+        version: 10.4.13(postcss@8.4.27)
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^2
+        version: 2.2.19(autoprefixer@10.4.13)(postcss@8.4.27)(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/tailwindcss-v3:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/tailwindcss-v3-js-config:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/tailwindcss-v3-merge-config:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/tailwindcss-v3-ts-config:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/twin.macro-v2:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      twin.macro:
+        specifier: ^2
+        version: 2.8.2(ts-node@10.9.1)
+
+  tests/integration/tailwindcss/fixtures/twin.macro-v3:
+    dependencies:
+      '@modern-js/app-tools':
+        specifier: workspace:*
+        version: link:../../../../../packages/solutions/app-tools
+      '@modern-js/plugin-tailwindcss':
+        specifier: workspace:*
+        version: link:../../../../../packages/cli/plugin-tailwind
+      '@modern-js/runtime':
+        specifier: workspace:*
+        version: link:../../../../../packages/runtime/plugin-runtime
+      postcss:
+        specifier: 8.4.27
+        version: 8.4.27
+      react:
+        specifier: ^18
+        version: 18.2.0
+      react-dom:
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.3.3(ts-node@10.9.1)
+      twin.macro:
+        specifier: ^3
+        version: 3.1.0(tailwindcss@3.3.3)
+
   tests/integration/temp-dir:
     dependencies:
       '@modern-js/runtime':
@@ -19623,7 +19695,7 @@ packages:
     resolution: {integrity: sha512-y/ZA3BGnxoM/QHHQ2Uy49CLtnWPbt4tTPpEEZiEmmiWBFKjej7nEyH8Ryz54jH0MLXflUYA3Er2zUxPSJu5R+g==}
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   /concat-stream@1.6.2:
     resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
@@ -34078,7 +34150,7 @@ packages:
       purgecss: 4.1.3
       quick-lru: 5.1.1
       reduce-css-calc: 2.1.8
-      resolve: 1.22.1
+      resolve: 1.22.4
       tmp: 0.2.1
     transitivePeerDependencies:
       - ts-node

From e459f8c93eefa7ae5111f37558cc626daa0efe6c Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 15:15:35 +0800
Subject: [PATCH 7/8] chore: fix test path

---
 packages/cli/plugin-tailwind/tests/utils.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/plugin-tailwind/tests/utils.test.ts b/packages/cli/plugin-tailwind/tests/utils.test.ts
index 07b1294b8205..81ecc773137f 100644
--- a/packages/cli/plugin-tailwind/tests/utils.test.ts
+++ b/packages/cli/plugin-tailwind/tests/utils.test.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import { CONFIG_CACHE_DIR, fs } from '@modern-js/utils';
-import { template, checkTwinMacroExist } from '../src/utils';
+import { template, checkTwinMacroExist } from '../src/macro';
 
 describe('template utils function', () => {
   it('generate tailwindcss.config.js template', () => {

From 4829d7ebf7f41692d0b3e0f905ef7a7efb10181e Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Fri, 25 Aug 2023 15:27:01 +0800
Subject: [PATCH 8/8] test: fix path

---
 packages/cli/plugin-tailwind/tests/cli.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/plugin-tailwind/tests/cli.test.ts b/packages/cli/plugin-tailwind/tests/cli.test.ts
index 380c9c3c804d..cb0fbfebb686 100644
--- a/packages/cli/plugin-tailwind/tests/cli.test.ts
+++ b/packages/cli/plugin-tailwind/tests/cli.test.ts
@@ -1,4 +1,4 @@
-import { getRandomTwConfigFileName } from '../src/cli';
+import { getRandomTwConfigFileName } from '../src/macro';
 
 describe('getRandomTwConfigFileName', () => {
   it('should return a string', () => {