@modern-js/main-doc 2.31.1 → 2.32.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @modern-js/main-doc
 
+## 2.32.0
+
+### Patch Changes
+
+- Updated dependencies [0cc3981]
+  - @modern-js/builder-doc@2.32.0
+
+## 2.31.2
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.31.2
+
 ## 2.31.1
 
 ### Patch Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Modern.js
+Copyright (c) 2021-present Modern.js
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -10,13 +10,8 @@ sidebar_label: tailwindcss
 ```js
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
   // Use source.design System config as Tailwind CSS theme config

package/docs/en/configure/app/usage.mdx

@@ -203,9 +203,7 @@ When using `modern.config.local.ts`, please note the following:
 - As `modern.config.local.ts` is only used for local debugging, it is not recommended to commit it to the repository, please ensure that the project's `.gitignore` file contains `modern.config.local.ts`.
 
 ```bash title=".gitingore"
-modern.config.local.ts
-modern.config.local.js
-modern.config.local.mjs
+modern.config.local.*
 ```
 
 ## Merge Multiple Configurations

package/docs/en/guides/basic-features/css.mdx

@@ -65,7 +65,7 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 Follow the steps below to make a selection:
 
-```bash
+```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
@@ -103,6 +103,48 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 :::
 
+### 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 autocompletion 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.
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
+    './storybook/**/*',
+  ],
+  // Theme configuration (optional)
+  theme: {},
+};
+```
+
+3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created, 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,
+  },
+  // Theme configuration (optional)
+  source: {
+    designSystem: tailwindConfig.theme,
+  },
+});
+```
+
+Please read the documentation for the following configuration options to understand their functions:
+
+- [tools.tailwindcss](/configure/app/tools/tailwindcss).
+- [source.designSystem](/configure/app/source/design-system).
+
 ### 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.

package/docs/zh/configure/app/tools/tailwindcss.mdx

@@ -10,13 +10,8 @@ sidebar_label: tailwindcss
 ```js
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
   // 使用 source.designSystem 配置作为 Tailwind CSS Theme 配置

package/docs/zh/configure/app/usage.mdx

@@ -203,9 +203,7 @@ export default defineConfig({
 - 由于 `modern.config.local.ts` 仅在本地调试时使用，因此不建议将其提交到代码仓库中，请确保项目的 `.gitignore` 文件中包含 `modern.config.local.ts` 等文件。
 
 ```bash title=".gitingore"
-modern.config.local.ts
-modern.config.local.js
-modern.config.local.mjs
+modern.config.local.*
 ```
 
 ## 合并多份配置

package/docs/zh/guides/basic-features/css.mdx

@@ -65,7 +65,7 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 按照如下进行选择：
 
-```bash
+```text
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
@@ -103,6 +103,48 @@ const App = () => (
 
 :::
 
+### 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` 文件，并写入你需要的 Tailwind CSS 配置。
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
+    './storybook/**/*',
+  ],
+  // 主题配置（可选）
+  theme: {},
+};
+```
+
+3. 在 `modern.config.ts` 中引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
+
+```ts title="modern.config.ts"
+import tailwindConfig from './tailwind.config';
+
+export default defineConfig({
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+  // 主题配置（可选）
+  source: {
+    designSystem: tailwindConfig.theme,
+  },
+});
+```
+
+请阅读相关配置项的文档来了解其作用：
+
+- [tools.tailwindcss](/configure/app/tools/tailwindcss)。
+- [source.designSystem](/configure/app/source/design-system)。
+
 ### Tailwind CSS 版本
 
 Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.31.1",
+  "version": "2.32.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.31.1"
+    "@modern-js/builder-doc": "^2.32.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.31.1",
-    "@modern-js/doc-tools": "2.31.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.31.1"
+    "@modern-js/builder-doc": "2.32.0",
+    "@modern-js/doc-tools": "2.32.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.0"
   },
   "scripts": {
     "dev": "modern dev",