跳转到主文档

Tailwind CSS

Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统,可以快速地为组件添加常用样式,同时支持主题样式的灵活扩展。在 Modern.js 中使用 Tailwind CSS,只需要在项目根目录下执行 pnpm run new 并开启。

按照如下进行选择:

? 请选择你想要的操作: 启用可选功能
? 启用可选功能: 启用 Tailwind CSS 支持

使用时在入口的根组件(如 src/App.jsx)添加如下代码:

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了。

补充信息

根据不同需求,可以选择性的导入 Tailwind CSS 提供的 CSS 文件。由于使用 @taiwind 与直接导入 CSS 文件的作用等价,因此关于 Tailwind CSS 提供的 CSS 文件的用途,可以参考 @tailwind 的使用 文档中注释里的内容。

当需要自定义 Tailwind CSS 的 theme 配置的时候,可以在配置 source.designSystem 中修改,例如,颜色主题中增加一个 primary

modern.config.js
export default defineConfig({
source: {
designSystem: {
extend: {
colors: {
primary: '#5c6ac4',
},
},
},
},
});

当需要对 Tailwind CSS 做 theme 以外的其他特殊配置时,可以在 tools.tailwindcss 中配置,例如设置 variants

modern.config.js
export default defineConfig({
tools: {
tailwindcss: {
variants: {
extend: {
backgroundColor: ['active'],
},
},
},
},
});