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 类型时,默认配置会作为第一个参数传入,你可以直接修改配置对象,也可以返回一个值作为最终结果:

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

注意事项

注意:

  • 如果你同时使用了 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 上。

  • 旧版本用法:
modern.config.ts
const { theme, ...rest } = tailwindConfig;

export default {
  tools: {
    tailwindcss: rest,
  },
  source: {
    designSystem: theme,
  },
};
  • 当前版本用法:
modern.config.ts
export default {
  tools: {
    tailwindcss: tailwindConfig,
  },
};