tools.tailwindcss

  • 类型: Object | Function
  • 默认值:
const tailwind = {
  content: [
    './config/html/**/*.html',
    './config/html/**/*.ejs',
    './config/html/**/*.hbs',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
    './storybook/**/*',
  ],
  // 使用 source.designSystem 配置作为 Tailwind CSS Theme 配置
  theme: source.designSystem,
};

对应 TailwindCSS 的配置。

Function 类型

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

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

Object 类型

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

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

限制

注意,该配置中不允许使用 theme 配置项,否则会构建失败。在 Modern.js 中,请使用 source.designSystem 作为 Tailwind CSS Theme 配置。

其他配置的使用方式和 Tailwind CSS 一致,请参考 tailwindcss - Configuration