tailwind.confing.js 配置文件

创建配置文件

使用 Tailwind CSS，你可以通过添加 Tailwind CSS Utilize Class中未包含的颜色、边距、宽度等进行自定义。自定义需要配置文件，但默认情况下不会创建，所以使用命令创建。

npx tailwind init

上面的命令将创建一个 tailwind.config.js 文件。

添加颜色

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: '#9cdbff',
      }
    }
  },
  variants: {},
  plugins: []
}

即使不使用配置文件，也可以通过将颜色用括号括起来来设置应用程序中不常用的颜色，例如 bg-[#9cdbff]。

添加后，构建，npm run build

将按钮颜色从红色更改为青色。由于加入青色时没有设置色深，所以设置为bg-cyan（从bg-red-700改为bg-cyan）。

<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline">前端晚间课</button>
复制代码

添加最大宽度并添加间距

你可以使用 max-width 设置浏览器上元素的最大宽度，但你可能希望将其设置为与 Tailwind CSS 中默认注册的宽度不同的宽度。在这种情况下，请在 tailwind.config.js 以及颜色中进行其他设置。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
    },
    variants: {},
    plugins: []
},

在class属性中使用时，设置max-w-custom。

可以使用间距设置宽度。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
        spacing:{
            76: '19rem',
        },
    },
    variants: {},
    plugins: []
},

在class属性中使用时，设置为w-76。

即使你不使用配置文件，你也可以为那些不经常使用的样式设置一个诸如p-[19rem]之类的描述。

添加字体大小

最小的字体大小类是text-xs，但是如果你想添加一个更小的字体大小类，你可以这样做。

theme: {
    extend: {
        colors:{
            'cyan':'#9cdbff',
        },
        maxWidth:{
            custom:'60rem',
        },
        spacing:{
            76: '19rem',
        },
        fontSize:{
            xxs:['0.625em',{lineHeight:'1rem'}],
        },
    },
    variants: {},
    plugins: []
},

如果要使用它，请在 class 属性中设置 text-xxs 。