---
title: tailwindcss
---

# tools.tailwindcss

- **类型：** `Object | Function`
- **默认值：**

```js
const tailwind = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './config/html/**/*.{html,ejs,hbs}',
    './storybook/**/*',
  ],
};
```

用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。

### 启用 Tailwind CSS

在使用 `tools.tailwindcss` 之前，你需要启用 Modern.js 的 Tailwind CSS 插件。

请阅读[「使用 Tailwind CSS」](/guides/basic-features/css/tailwindcss) 章节来了解开启方式。

### Function 类型

当 `tools.tailwindcss` 为 Function 类型时，默认配置会作为第一个参数传入，你可以直接修改配置对象，也可以返回一个值作为最终结果：

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss(config) {
      config.content.push('./some-folder/**/*.{js,ts}');
    },
  },
};
```

### Object 类型

当 `tools.tailwindcss` 的值为 `Object` 类型时，会与默认配置通过 `Object.assign` 浅合并。

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss: {
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
      ],
    },
  },
};
```

### 注意事项

注意：

- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
- 如果你同时使用了 `source.designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。

其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。

### 关于 source.designSystem

`source.designSystem` 是 Modern.js 中废弃的配置项。

从 Modern.js vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `source.designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。

- 旧版本用法：

```ts title="modern.config.ts"
const { theme, ...rest } = tailwindConfig;

export default {
  tools: {
    tailwindcss: rest,
  },
  source: {
    designSystem: theme,
  },
};
```

- 当前版本用法：

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss: tailwindConfig,
  },
};
```
