Skip to main content

tailwind.config.js

/** @type {import('tailwindcss').Config} */

作用：配合提示

content​

配置项目中的资源文件的路径。 https://tailwindcss.com/docs/content-configuration

Tailwind CSS 会扫描content中匹配到的每个资源文件中的class names，生成相应的css styles。

如果某文件没有在content中匹配到，该文件中用到的class不会被生成到css文件。

匹配语法 fast-glob https://github.com/mrmlnc/fast-glob https://www.npmjs.com/package/fast-glob

注意：

  • 路径与项目根目录有关，与 tailwind.config.js file无关；
  • js中使用了class names 也需要包含在内。
  • 不要扫描css 文件， 因为Tailwind 扫描你的模板中使用的class names生成css, 不要扫描Tailwind 生成的css.
  • 尽可能精准匹配，排除不必要扫描的文件，提升性能。

推荐（优化）: 精确匹配所要扫描文件，如果要匹配根目录下文件，直接单独列出。

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
    './public/index.html',
  ],
  // ...
}

theme​

配置主题

plugins​

注册插件，用于生成额外功能类、组件、基本样式或自定义变体。

presets​

指定自己的自定义基本配置，来替代 Tailwind 的默认基本配置.

prefix​

为所有Tailwind默认自带的功能类添加自定义前缀。防止Tailwind 中的类名与已有的css类名冲突

自定义的utility 不会被加上前缀。

important​

控制是否将 Tailwind 的功能类标记为 !important。当您将 Tailwind 与已存在的具有非常特殊的选择器的 CSS 一起使用时，这可能会非常有用。 要生成 !important 的功能类，在您的配置选项中把 important 键设置为 true

同样此选项不会将自定义的功能类标记为!important

important: true​

.mb-2 {
  margin-bottom: 0.5rem !important;
}
.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

选择器策略: 使用选择器 提高Tailwind 自带功能类的优先级。

important: '#app'​

此时在最外面包裹元素上添加 id="app"

/* 输出 */
#app .mb-2{
  margin-bottom: 0.5rem;
}
#app .text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

! Important modifier​

<p class="!font-medium"></p>

<div class="sm:hover:!tw-font-bold"> 添加在修饰符之后，类名之前（类名前缀之前）。

separator​

自定义应该使用什么字符或字符串来分隔变体前缀（屏幕大小、hover、focus等）和类名（text-center、items-end等）。

corePlugins​

可以设置是否启用那些Tailwind 默认生成的类。 默认情况下启用所有核心插件。

corePlugins: {
  float: false,
  objectFit: false,
  objectPosition: false,
}

核心插件列表： https://tailwindcss.com/docs/configuration#core-plugins

Referencing in JavaScript （resolveConfig）​

如果想在js 中获取配置的样式值，tailwind 提供 resolveConfig 辅助工具 通过传入配置信息 解析配置值。
但是这将过渡引入许多构建依赖，导致包体积增大，建议使用 babel-plugin-preval 等工具在构建时生成配置的静态版本。？？？

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'