You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/document/main-doc/docs/en/guides/basic-features/css/tailwindcss.mdx
+58-62Lines changed: 58 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,86 +2,91 @@
2
2
3
3
[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.
4
4
5
-
To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
5
+
## Using Tailwind CSS in Modern.js
6
6
7
-
1. Run `pnpm run new` in the root directory of your project and make the following selections:
7
+
To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you only need to configure it according to the Rsbuild steps. Rsbuild supports Tailwind CSS versions v3 and v4:
8
8
9
-
```text
10
-
? Please select the operation you want: Enable features
11
-
? Please select the feature name: Enable Tailwind CSS
As Modern.js evolves, to provide a more unified build experience and stronger configuration flexibility, we have adjusted the way Tailwind CSS is supported. Modern.js V3 recommends integrating Tailwind CSS natively through Rsbuild, no longer relying on the `@modern-js/plugin-tailwindcss` plugin, thereby fully leveraging Rsbuild’s more flexible configuration capabilities and better build experience.
20
17
21
-
exportdefaultdefineConfig({
22
-
plugins: [..., tailwindcssPlugin()],
23
-
});
24
-
```
18
+
### Migration Steps
25
19
26
-
3. Create a `index.css` file and add the following code:
20
+
Taking Tailwind CSS V3 as an example, the migration steps are as follows:
27
21
28
-
```css title="index.css"
29
-
@tailwind base;
30
-
@tailwind components;
31
-
@tailwind utilities;
32
-
```
22
+
#### 1. Remove the Old Plugin
23
+
24
+
- Remove the `@modern-js/plugin-tailwindcss` dependency
25
+
- Remove the import and usage of the `@modern-js/plugin-tailwindcss` plugin in the `modern.config.ts` file
33
26
34
-
:::info
35
-
Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
- If configured only in `tailwind.config.{ts,js}`, no additional action is needed
44
+
- If configured only in `modern.config.ts`, migrate the Tailwind-related configuration to `tailwind.config.{ts,js}`
55
45
56
-
In Modern.js, you have two ways to configure Tailwind CSS:
46
+
-**Dual Configuration Case**: If configurations exist in both `tailwind.config.{ts,js}` and `modern.config.ts`, merge the configurations and migrate the merged result to `tailwind.config.{ts,js}`
57
47
58
-
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.
48
+
-**Special Directory Handling**: If your project contains storybook or config/html directories, supplement `./storybook/**/*` or `./config/html/**/*.{html,ejs,hbs}` in the `content` field of `tailwind.config.{ts,js}`
59
49
60
-
```ts title="tailwind.config.ts"
61
-
importtype { Config } from'tailwindcss';
50
+
#### 4. CSS Style Import
62
51
63
-
exportdefault {
64
-
content: ['./src/**/*.{js,jsx,ts,tsx}'],
65
-
} asConfig;
52
+
- Change to use the @tailwind directive
53
+
54
+
```css
55
+
/* Old way */
56
+
@import'tailwindcss/base.css';
57
+
@import'tailwindcss/components.css';
58
+
@import'tailwindcss/utilities.css';
59
+
60
+
/* New way */
61
+
@tailwind base;
62
+
@tailwind components;
63
+
@tailwind utilities;
66
64
```
67
65
68
-
:::tip
69
-
Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
70
-
:::
66
+
#### 5. Twin.macro Integration
67
+
68
+
If your project uses twin.macro, perform the following steps; otherwise, ignore:
71
69
72
-
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.
- Add the `babel-plugin-macros.config.cjs` configuration file:
73
72
74
-
```ts title="modern.config.ts"
75
-
exportdefault {
76
-
tools: {
77
-
tailwindcss: {
78
-
content: ['./src/**/*.{js,jsx,ts,tsx}'],
79
-
},
73
+
```js title="babel-plugin-macros.config.cjs"
74
+
module.exports= {
75
+
twin: {
76
+
preset:'styled-components',
77
+
config:'./tailwind.config.js',
80
78
},
81
79
};
82
80
```
83
81
84
-
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}`.
82
+
#### Tailwind CSS V2 Migration
83
+
84
+
If your project still uses Tailwind CSS v2, we recommend upgrading to v3 to support JIT and other features. For differences between Tailwind CSS v2 and v3, please refer to the following articles:
The migration for Tailwind CSS v2 also follows the above steps, but note that the original plugin automatically adapts to the differences between Tailwind v2 (purge configuration) and v3 (content configuration). After removal, you need to use the `purge` option to specify the CSS classes to retain.
85
90
86
91
## Tailwind CSS Autocomplete
87
92
@@ -92,15 +97,6 @@ You can follow the steps below to enable the autocomplete feature:
92
97
1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
93
98
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.
94
99
95
-
## Tailwind CSS Version
96
-
97
-
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.
98
-
99
-
If your project is still using Tailwind CSS v2, we recommend that you upgrade to v3 to support JIT and other capabilities. For the differences between Tailwind CSS v2 and v3 versions, please refer to the following articles:
0 commit comments