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

使用 `Twin` 库

在上一章中介绍了什么是 CSS-in-JS 以及社区常用的 CSS-in-JS 库 styled-components。这一部分将要介绍如何通过 Twin 在 CSS-in-JS 中使用 Tailwind CSS。使用 Twin 可以更容易在 CSS-in-JS 的代码中使用 Tailwind CSS。Twin 对于自己的描述是：

Twin blends the magic of Tailwind with the flexibility of css-in-js

在开启「Tailwind CSS 支持」的功能后，首先需要安装 Twin 依赖:

# package manager is `pnpm`
pnpm add twin.macro -D

# package manager is `yarn`
yarn add twin.macro -D

当项目安装 twin.macro 依赖后，Modern.js 会检测到该依赖并对内置的 babel-plugin-macro 增加 twin.macro 相关的配置。因此在安装完依赖后，无需手动配置。下面是一个简单使用 twin.macro 的示例：

import tw from 'twin.macro'

const Input = tw.input`border hover:border-black`

提示

如果在运行过程中出现了 MacroError: /project/App.tsx 错误的时候，有可能是缺少 twin.macro 依赖导致的。

更多的使用方式可以参考 twin.macro 的文档。

twin.macro 默认会读取项目目录下的 tailwindcss.config.js 文件，或者通过 babel-plugin-macro 上的 twin.config 指定的文件路径读取 Tailwind CSS 配置。不过在 Modern.js 中不需要进行这些额外配置。

当在 modern.config.ts 文件中通过 source.designSystem 和 tools.tailwindcss 对 Tailwind CSS 进行配置的时候，这些配置也会对 twin.macro 生效。

当为项目配置 Tailwind CSS 的时候，source.designSystem 和 tools.tailwindcss 这两个配置的组合等价于单独配置了一个 tailwindcss.config.js 文件。其中source.designSystem等效于 Tailwind CSS 的 theme 配置。

Tailwind CSS

补充信息

使用 Twin 库​

提示

使用 `Twin` 库