tools.tailwindcss#

• 类型： Object | Function
• 默认值：

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

用于修改 Tailwind CSS 的配置项。

启用 Tailwind CSS#

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

请阅读「使用 Tailwind CSS」 章节来了解开启方式。

Function 类型#

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

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

Object 类型#

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

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。

关于 source.designSystem#

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

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

• 旧版本用法：

const { theme, ...rest } = tailwindConfig;

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

• 当前版本用法：

export default {
  tools: {
    tailwindcss: tailwindConfig,
  },
};