@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/en/guides/upgrade/tailwindcss.mdx

@@ -0,0 +1,130 @@
+# Tailwind Plugin Changes
+
+Modern.js 3.0 recommends integrating Tailwind CSS through Rsbuild's native approach, no longer relying on the `@modern-js/plugin-tailwindcss` plugin, to fully utilize Rsbuild's more flexible configuration capabilities and better build experience.
+
+## Migration Steps
+
+The migration operations in this section only need to be performed when the project actually uses the `@modern-js/plugin-tailwindcss` plugin.
+
+### 1. Remove Old Plugin
+
+Remove the `@modern-js/plugin-tailwindcss` dependency and configuration.
+
+**2.0 Version:**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [tailwindcssPlugin()],
+});
+```
+
+**3.0 Version:**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  plugins: [],
+});
+```
+
+Also remove the `@modern-js/plugin-tailwindcss` dependency from `package.json`.
+
+### 2. Configure PostCSS
+
+Create or update the `postcss.config.cjs` file.
+
+```js title="postcss.config.cjs"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+```
+
+### 3. Tailwind CSS Configuration Migration
+
+**Single Configuration Case**:
+
+- If only configured in `tailwind.config.{ts,js}`, no additional processing is needed
+- If only configured in `modern.config.ts`, you need to migrate Tailwind-related configurations to `tailwind.config.{ts,js}`
+
+**Dual Configuration Case**:
+
+If both `tailwind.config.{ts,js}` and `modern.config.ts` have configurations, you need to merge the configurations from both and migrate the merged configuration to `tailwind.config.{ts,js}`.
+
+**Special Directory Handling**:
+
+If the project has storybook or config/html directories, you need to add them to the `content` in `tailwind.config.{ts,js}`:
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './storybook/**/*', // If storybook directory exists
+    './config/html/**/*.{html,ejs,hbs}', // If config/html directory exists
+  ],
+};
+```
+
+### 4. CSS Style Import
+
+Change the CSS import method to the `@tailwind` directive approach.
+
+**2.0 Version:**
+
+```css
+@import 'tailwindcss/base.css';
+@import 'tailwindcss/components.css';
+@import 'tailwindcss/utilities.css';
+```
+
+**3.0 Version:**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### 5. Twin.macro Integration
+
+If the project uses twin.macro, you need to configure it manually. If not used, you can skip this step.
+
+**Migration Steps**:
+
+1. Manually install dependencies: `pnpm add twin.macro styled-components babel-plugin-macros -D`
+2. Configure the `babel-plugin-macros` plugin in `modern.config.ts`:
+
+```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 Version Migration
+
+If your project still uses Tailwind CSS v2, we recommend upgrading to v3 to support features like JIT. For differences between Tailwind CSS v2 and v3, please refer to:
+
+- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
+- [Upgrade Guide](https://v3.tailwindcss.com/docs/upgrade-guide)
+
+Tailwind CSS v2 migration also follows the steps above, but note that the original plugin automatically adapted to differences between Tailwind v2 (`purge` configuration) and v3 (`content` configuration). After removing the plugin, if using v2, you need to use the `purge` configuration item in `tailwind.config.{ts,js}` to specify CSS class names to keep.

package/docs/en/guides/upgrade/web-server.mdx

@@ -0,0 +1,91 @@
+# Custom Web Server Changes
+
+This chapter covers upgrades for two types of legacy custom Server APIs:
+
+- **unstableMiddleware**
+- **Hook**
+
+These two approaches are mutually exclusive in the legacy version. When migrating, please choose the corresponding path based on the capabilities actually used in the project.
+
+## unstableMiddleware
+
+### Core Differences
+
+- **File Structure**: `server/index.ts` → `server/modern.server.ts`
+- **Export Method**: `unstableMiddleware` array → `defineServerConfig`
+- **Context API**: Modern.js Server Context → Hono Context (`c.req`/`c.res`)
+- **Middleware Execution**: Legacy version could skip calling `next()`, new version must call it for subsequent chain execution
+- **Response Method**: `c.response.raw()` → `c.text()` / `c.json()`
+
+### File and Export
+
+```typescript
+// Legacy - server/index.ts
+export const unstableMiddleware: UnstableMiddleware[] = [middleware1, middleware2];
+
+// New - server/modern.server.ts
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  middlewares: [
+    { name: 'middleware1', handler: middleware1 },
+    { name: 'middleware2', handler: middleware2 },
+  ],
+});
+```
+
+### Type and next Call
+
+```typescript
+// Legacy
+import type { UnstableMiddleware, UnstableMiddlewareContext } from '@modern-js/server-runtime';
+const middleware: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+  return c.response.raw('response'); // Will continue rendering even without calling next
+};
+
+// New
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+const middleware: MiddlewareHandler = async (c, next) => {
+  await next(); // Must call
+  return c.text('response');
+};
+```
+
+### Context API Comparison
+
+| Legacy API               | New API                 | Description            |
+| -------------------- | ---------------------- | ------------- |
+| `c.request.cookie`   | `getCookie(c, 'key')`  | Cookie reading      |
+| `c.req.cookie()`     | `getCookie(c, 'key')`  | Hono v4 deprecated    |
+| `c.request.pathname` | `c.req.path`           | Request path          |
+| `c.request.host`     | `c.req.header('Host')` | Request host          |
+| `c.request.query`    | `c.req.query()`        | Query parameters          |
+| `c.request.headers`  | `c.req.header()`       | Request headers           |
+| `c.response.status`  | `c.status()`           | Response status code         |
+| `c.response.set`     | `c.res.headers.set`    | Set response headers         |
+| `c.response.raw`     | `c.text` / `c.json`    | Response body           |
+
+## afterRender Hook
+
+`afterRender` is only used for HTML processing after page rendering is complete.
+
+```typescript
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+const renderMiddleware: MiddlewareHandler = async (c, next) => {
+  await next(); // Wait for page rendering first
+  const { res } = c;
+  const html = await res.text();
+
+  const modified = html
+    .replace('<head>', '<head><meta name="author" content="ByteDance">')
+    .replace('<body>', '<body><div id="loading">Loading...</div>')
+    .replace('</body>', '<script>console.log("Page loaded")</script></body>');
+
+  c.res = c.body(modified, { status: res.status, headers: res.headers });
+};
+
+export default defineServerConfig({
+  renderMiddlewares: [{ name: 'custom-content-injection', handler: renderMiddleware }],
+});
+```

package/docs/en/plugin/_meta.json

@@ -11,6 +11,11 @@
     "name": "runtime-plugins",
     "label": "runtime-plugins"
   },
+  {
+    "type": "dir",
+    "name": "server-plugins",
+    "label": "server-plugins"
+  },
   {
     "type": "dir",
     "name": "official",

package/docs/en/plugin/cli-plugins/_meta.json

@@ -1 +1 @@
-["api", "life-cycle", "migration"]
+["api", "life-cycle"]

package/docs/en/plugin/cli-plugins/api.mdx

@@ -1,6 +1,6 @@
 # CLI Plugin API
 
-This document details the API for Modern.js CLI plugins. CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
+Modern.js's CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
 
 :::info
 
@@ -13,9 +13,9 @@ CLI plugins need to be configured via the [`plugins`](/configure/app/plugins) fi
 A typical CLI plugin structure is as follows:
 
 ```typescript
-import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 
-const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
+const myCliPlugin = (): CliPlugin<AppTools> => ({
   name: '@my-org/my-plugin', // Plugin name, ensure uniqueness
   setup: api => {
     // Use the API here to register hooks, add commands, etc.
@@ -28,7 +28,8 @@ const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
 export default myCliPlugin;
 ```
 
-The `setup` function receives an `api` object, which provides all available CLI plugin APIs.
+- `name`: A unique identifier for the plugin.
+- The `setup` function receives an `api` object, which provides all available CLI plugin APIs.
 
 ## Information Retrieval
 
@@ -59,7 +60,6 @@ Gets the context information of the Modern.js application.
 | `apiDirectory`         | `string`            | The absolute path to the API module directory (used by BFF)      | -                            |
 | `lambdaDirectory`      | `string`            | The absolute path to the Lambda module directory (used by BFF)   | -                            |
 | `runtimeConfigFile`    | `string`            | The name of the runtime configuration file                       | -                            |
-| `serverConfigFile`     | `string`            | The name of the server configuration file                        | -                            |
 | `checkedEntries`       | `string[]`          | Specified entry information                                      | -                            |
 | `apiOnly`              | `boolean`           | Whether it is in `apiOnly` mode                                  | -                            |
 
@@ -133,8 +133,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');
 }
 ```
 
@@ -191,12 +191,12 @@ api.config(() => {
 
 #### `api.modifyBundlerChain`
 
-Modify Webpack or Rspack configuration using the chain API.
+Modify Rspack configuration using the chain API.
 
-- **Type:** `api.modifyBundlerChain(modifyFn: (chain: WebpackChain | RspackChain, utils: WebpackUtils | RspackUtils) => void | Promise<void>)`
+- **Type:** `api.modifyBundlerChain(modifyFn: (chain: RspackChain, utils: RspackUtils) => void | Promise<void>)`
 - **Parameters:**
-  - `modifyFn`: A modification function that receives a `webpack-chain` or `RspackChain` instance and utility functions as parameters.
-- **Execution Phase:** When generating the final Webpack or Rspack configuration.
+  - `modifyFn`: A modification function that receives a `RspackChain` instance and utility functions as parameters.
+- **Execution Phase:** When generating the final Rspack configuration.
 - **Corresponding Rsbuild Hook:** [modifyBundlerChain](https://rsbuild.rs/en/plugins/dev/hooks#modifybundlerchain)
 - **Example:**
 
@@ -251,66 +251,16 @@ api.modifyRspackConfig((config, utils) => {
 
 ---
 
-#### `api.modifyWebpackChain`
-
-Modify the Webpack configuration using [webpack-chain](https://github.com/neutrinojs/webpack-chain) (when using Webpack as the bundler).
-
-- **Type:** `api.modifyWebpackChain(modifyFn: (chain: WebpackChain, utils: WebpackUtils) => void | Promise<void>)`
-- **Parameters:**
-  - `modifyFn`: A modification function that receives a `webpack-chain` instance and utility functions as parameters.
-- **Execution Phase:** When generating the final Webpack configuration.
-- **Example:**
+**Build Configuration Modification Order**
 
-```typescript
-api.modifyWebpackChain((chain, utils) => {
-  // Add a custom Webpack loader
-  chain.module
-    .rule('my-loader')
-    .test(/\.my-ext$/)
-    .use('my-loader')
-    .loader(require.resolve('./my-loader'));
-});
 ```
-
----
-
-#### `api.modifyWebpackConfig`
-
-Directly modify the Webpack configuration object (when using Webpack as the bundler).
-
-- **Type:** `api.modifyWebpackConfig(modifyFn: (config: WebpackConfig, utils: WebpackUtils) => WebpackConfig | Promise<WebpackConfig> | void)`
-- **Parameters:**
-  - `modifyFn`: A modification function that receives the Webpack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
-- **Execution Phase:** When generating the final Webpack configuration.
-- **Example:**
-
-```typescript
-api.modifyWebpackConfig((config, utils) => {
-  // Disable source map
-  config.devtool = false;
-});
+modifyRsbuildConfig
+modifyBundlerChain
+tools.bundlerChain
+modifyRspackConfig
+tools.rspack
 ```
 
-**Build Configuration Modification Order**
-
-- **Building with Rspack:**
-  ```
-  modifyRsbuildConfig
-  modifyBundlerChain
-  tools.bundlerChain
-  modifyRspackConfig
-  tools.rspack
-  ```
-- **Building with Webpack:**
-  ```
-  modifyBundlerChain
-  tools.bundlerChain
-  modifyWebpackChain
-  tools.webpackChain
-  modifyWebpackConfig
-  tools.webpack
-  ```
-
 ---
 
 #### `api.modifyServerRoutes`
@@ -626,4 +576,3 @@ api.onBeforePrintInstructions(({ instructions }) => {
 ## Other Notes
 
 - Refer to [CLI Plugin Lifecycle](./life-cycle.mdx) to understand the execution order of plugin hooks.
-- Refer to [CLI Plugin Migration Guide](./migration.mdx) to learn how to migrate from the old version of plugins to the new version.

package/docs/en/plugin/cli-plugins/life-cycle.mdx

@@ -36,8 +36,6 @@ flowchart TD
     modifyBundlerChain(modifyBundlerChain)
     modifyRsbuildConfig(modifyRsbuildConfig)
     modifyRspackConfig(modifyRspackConfig)
-    modifyWebpackChain(modifyWebpackChain)
-    modifyWebpackConfig(modifyWebpackConfig)
 
     onBeforeBuild_rsbuild(onBeforeBuild)
     onAfterBuild_rsbuild(onAfterBuild)
@@ -63,8 +61,6 @@ flowchart TD
     registry_rsbuild_hooks --> modifyBundlerChain
     modifyBundlerChain --> modifyRsbuildConfig
     modifyRsbuildConfig --> modifyRspackConfig
-    modifyRspackConfig --> modifyWebpackChain
-    modifyWebpackChain --> modifyWebpackConfig
     registry_rsbuild_hooks --> onBeforeBuild_rsbuild
     onBeforeBuild_rsbuild --> onAfterBuild_rsbuild
     onAfterBuild_rsbuild --> onDevCompileDone

package/docs/en/plugin/introduction.mdx

@@ -18,9 +18,9 @@ Without a plugin system, these requirements might require modifying the framewor
 
 Modern.js offers two main types of plugins: Modern.js framework plugins and Rsbuild build plugins. The choice of which plugin to use depends on your specific needs:
 
-- **Rsbuild Build Plugins:** If your needs are closely related to the build process, especially involving modifications to Webpack or Rspack configuration, then you should choose an Rsbuild plugin. For example:
+- **Rsbuild Build Plugins:** If your needs are closely related to the build process, especially involving modifications to Rspack configuration, then you should choose an Rsbuild plugin. For example:
 
-  - Modifying Webpack/Rspack `loader` or `plugin` configurations.
+  - Modifying Rspack `loader` or `plugin` configurations.
   - Handling new file types.
   - Modifying or compiling file contents.
   - Optimizing or processing build artifacts.
@@ -31,7 +31,7 @@ Modern.js offers two main types of plugins: Modern.js framework plugins and Rsbu
   - Customizing the application's rendering process (e.g., SSR).
   - Adding server-side middleware or handler functions.
 
-In short, use Rsbuild plugins when you need to modify Webpack/Rspack configurations; use Modern.js plugins for other framework-related extensions.
+In short, use Rsbuild plugins when you need to modify Rspack configurations; use Modern.js plugins for other framework-related extensions.
 
 ## Modern.js Framework Plugins
 
@@ -70,27 +70,36 @@ export default defineRuntimeConfig({
 });
 ```
 
-{/* prettier-ignore */}
-{/* #### Server Plugins
+#### Server Plugins
 
 Server plugins are used to provide additional functionality when the application receives requests, such as adding middleware and modifying request responses.
 
 Server plugins are configured via the `plugins` field in `server/modern.server.ts`.
 
-````ts title="src/modern.server.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-import bffPlugin from '@modern-js/plugin-bff/server';
-
-export default defineConfig({
-  plugins: [bffPlugin()],
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  plugins: [
+    {
+      name: 'custom-plugin-in-config',
+      setup: api => {
+        api.onPrepare(() => {
+          const { middlewares } = api.getServerContext();
+
+          middlewares?.push({
+            name: 'server-plugin-middleware',
+            handler: async (c, next) => {
+              c.res.headers.set('x-render-middleware-plugin', 'ok');
+              await next();
+            },
+          });
+        });
+      },
+    },
+  ],
 });
-``` */}
-
-:::tip
-Modern.js officially uses the new plugin mechanism starting from `MAJOR_VERSION.66.0`.
-
-If your current version is lower than MAJOR_VERSION.66.0, you can upgrade by running `npx modern upgrade`.
-:::
+```
 
 ### Developing Plugins
 
@@ -105,13 +114,7 @@ Rsbuild is the underlying build tool for Modern.js. By adding Rsbuild plugins, y
 - Modifying or compiling files
 - Deploying artifacts
 
-You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option.  See [builderPlugins](/configure/app/builder-plugins.html) for details.
-
-:::tip
-Starting from `MAJOR_VERSION.46.0`, Modern.js upgraded its underlying build tool to [Rsbuild](https://rsbuild.rs/).
-
-If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by running `npx modern upgrade`.
-:::
+You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option. See [builderPlugins](/configure/app/builder-plugins.html) for details.
 
 :::info
 You can read [Rsbuild Official Website - Plugins](https://rsbuild.rs/plugins/list/index) to learn more about the Rsbuild plugin system.
@@ -121,33 +124,30 @@ You can read [Rsbuild Official Website - Plugins](https://rsbuild.rs/plugins/lis
 
 #### Built-in Plugins
 
-The following are official Rsbuild plugins that are already built into Modern.js.  They can be enabled without installation:
-
-| Plugin                                                                                         | Description                                                                                     | Modern.js Link                                                                                                                        |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React Plugin](https://rsbuild.rs/zh/plugins/list/plugin-react)                               | Provides support for React                                                                      | -                                                                                                                                     |
-| [SVGR Plugin](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                                 | Supports converting SVG images into React components                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Styled Components Plugin](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | Provides compile-time support for styled-components                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry Plugin](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)                 | Automatically retries requests when static asset loading fails                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check)               | Runs TypeScript type checking in a separate process                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
-| [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | Injects polyfills for Node core modules in the browser                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
-| [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
-| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression   | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
-| [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | Implements rem adaptive layout for mobile pages                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to reference YAML files and convert them to JavaScript objects                                         | [YAML Files](/guides/basic-features/static-assets/json-files.html#yaml-files)                                                                         |
-| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to reference TOML files and convert them to JavaScript objects                                         | [TOML Files](/guides/basic-features/static-assets/json-files.html#toml-files)                                                                       |
+The following are official Rsbuild plugins that are already built into Modern.js. They can be enabled without installation:
+
+| Plugin                                                                                 | Description                                                                                                                                     | Modern.js Link                                                                                                                        |
+| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React Plugin](https://rsbuild.rs/plugins/list/plugin-react)                        | Provides support for React                                                                                                                      | -                                                                                                                                     |
+| [SVGR Plugin](https://rsbuild.rs/plugins/list/plugin-svgr)                          | Supports converting SVG images into React components                                                                                            | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry Plugin](https://rsbuild.rs/plugins/list/plugin-assets-retry)          | Automatically retries requests when static asset loading fails                                                                                  | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | Runs TypeScript type checking in a separate process                                                                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates                        | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression                         | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                     | Implements rem adaptive layout for mobile pages                                                                                                 | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
 
 #### Plugins Not Built-in
 
 The following are official Rsbuild plugins that are not built into Modern.js:
 
 - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compresses image resources used in the project.
-- [Stylus Plugin](https://rsbuild.rs/zh/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
+- [Stylus Plugin](https://rsbuild.rs/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
 - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build UMD format artifacts.
+- [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Used to reference YAML files and convert them to JavaScript objects.
+- [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Used to reference TOML files and convert them to JavaScript objects.
 
 import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
 
 <OtherPlugins />
-````
+```

package/docs/en/plugin/official/_meta.json

@@ -3,10 +3,5 @@
     "type": "dir",
     "name": "cli-plugins",
     "label": "cli-plugins"
-  },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "rsbuild-plugins"
   }
 ]

package/docs/en/plugin/official/cli-plugins/_meta.json

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

package/docs/en/plugin/official/cli-plugins/plugin-styled-components.mdx

@@ -0,0 +1,5 @@
+# styled-components Plugin
+
+In a Modern.js application, developers can use the styled-components plugin to utilize the styled-components library within the app, enabling CSS-in-JS functionality.
+
+For more details, please refer to [Using CSS-in-JS](/guides/basic-features/css/css-in-js).

package/docs/en/plugin/official/cli-plugins.mdx

@@ -1,6 +1,4 @@
 # Overview
 
-- [@modern-js/plugin-tailwindcss](/plugin/official/cli-plugins/plugin-tailwind): Enables the use of Tailwind CSS styles.
 - [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
 - [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-ssg): Provides static site generation capabilities.
-- [@modern-js/plugin-swc](/plugin/official/cli-plugins/plugin-swc): Provides SWC compilation support.