feat: remove tools.tailwindcss

Author: keepview

packages/document/main-doc/docs/en/apis/app/commands.mdx

@@ -108,7 +108,7 @@ Open the above HTML file in the browser, you can see the tile diagram of the bun
 
 The `modern new` command is used to enable features in an existing project.
 
-For example, add application entry, enable some optional features such as Tailwind CSS, micro frontend, etc.
+For example, add application entry, enable some optional features such as BFF, micro frontend, etc.
 
 ```bash
 Usage: modern new [options]
@@ -142,8 +142,7 @@ In the project, execute the `new` command to enable features as follows:
 $ npx modern new
 ? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
-❯ Enable Tailwind CSS
-  Enable BFF
+❯ Enable BFF
   Enable SSG
   Enable Micro Frontend
 ```

packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx

@@ -150,7 +150,6 @@ Due to the limitations of the JSON file format, only simple types such as number
 #### Notes
 
 - It is not recommended to use both `package.json` and `modern.config.js` for configuration simultaneously. If both are used and conflicts arise, Modern.js will prompt an error in the command line.
-- The `@modern-js/runtime` exports a similarly named [defineConfig](/apis/app/runtime/app/define-config) API, so please be careful to distinguish between them.
 
 ### Local Debugging Configuration
 

packages/document/main-doc/docs/en/configure/app/usage.mdx

@@ -39,5 +39,4 @@ Currently provided is as follows:
 | Less              | [tools.less](/configure/app/tools/less)                          |
 | Sass              | [tools.sass](/configure/app/tools/sass)                          |
 | Minify CSS        | [tools.minifyCss](/configure/app/tools/minify-css)               |
-| Tailwind CSS      | [tools.tailwind](/configure/app/tools/tailwindcss)               |
 | Autoprefixer      | [tools.autoprefixer](/configure/app/tools/autoprefixer)          |

packages/document/main-doc/docs/en/guides/advanced-features/low-level.mdx

@@ -65,18 +65,30 @@ module.exports = {
 
 #### 5. Twin.macro Integration
 
-If your project uses twin.macro, perform the following steps; otherwise, ignore:
-
-- Manually install dependencies: `pnpm add twin.macro styled-components -D`
-- Add the `babel-plugin-macros.config.cjs` configuration file:
-
-```js title="babel-plugin-macros.config.cjs"
-module.exports = {
-  twin: {
-    preset: 'styled-components',
-    config: './tailwind.config.js',
+If the project uses twin.macro, perform the following steps; otherwise, ignore:
+
+- Manually install dependencies: `pnpm add twin.macro styled-components babel-plugin-macros -D`
+- Configure the `babel-plugin-macros` Babel plugin:
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  plugins: [appTools()],
+  tools: {
+    babel: {
+      plugins: [
+        [
+          'babel-plugin-macros',
+          {
+            twin: {
+              preset: 'styled-components',
+              config: './tailwind.config.ts',
+            },
+          },
+        ],
+      ],
+    },
   },
-};
+});
 ```
 
 #### Tailwind CSS V2 Migration

packages/document/main-doc/docs/en/guides/basic-features/css/tailwindcss.mdx

@@ -52,7 +52,7 @@ Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables
 
 Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax.
 
-Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v2 and v3.
+Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v3 and v4.
 
 ## CSS Preprocessors
 

packages/document/main-doc/docs/en/guides/get-started/tech-stack.mdx

@@ -132,8 +132,8 @@ Checks if a specified plugin is registered.
 - **Example:**
 
 ```typescript
-if (api.isPluginExists('@modern-js/plugin-tailwind')) {
-  console.log('Tailwind CSS plugin is enabled');
+if (api.isPluginExists('@modern-js/plugin-bff')) {
+  console.log('BFF plugin is enabled');
 }
 ```
 

packages/document/main-doc/docs/en/plugin/cli-plugins/api.mdx

@@ -1 +1 @@
-["plugin-tailwind", "plugin-bff", "plugin-ssg"]
+["plugin-bff", "plugin-ssg"]

packages/document/main-doc/docs/en/plugin/official/cli-plugins/_meta.json

@@ -108,7 +108,7 @@ info    Production file sizes:
 
 `modern new` 命令用于在已有项目中添加项目元素。
 
-比如添加应用入口、启用一些可选功能如 Tailwind CSS、微前端开发模式等。
+比如添加应用入口、启用一些可选功能如 BFF、微前端开发模式等。
 
 ```bash
 Usage: modern new [options]
@@ -142,8 +142,7 @@ $ npx modern new
 $ npx modern new
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 (Use arrow keys)
-❯ 启用 「Tailwind CSS」 支持
-  启用「BFF」功能
+❯ 启用「BFF」功能
   启用「微前端」模式
 ```