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'],
        },
      },
    },
  },
});