Tailwindcss 扩展默认配置来自定义颜色

背景

项目里多个Tab标签都需要设置同样的背景颜色#F1F5FF，在集成tailwindcss之前就是重复该样式，如下图：

.body {
	background-color: #f1f5ff;
}

集成tailwindcss时，我们希望在class中直接设置该背景色，但是默认的tailwindcss的背景色色板里不包含该颜色，我们想到要定义一个颜色变量保存，再引用该颜色

Tailwindcss 定制

自定义调色板

默认情况下，Tailwind 将整个默认调色板用作背景颜色。

您可以通过编辑文件中的变量来自定义调色板，或者使用Tailwind 配置部分仅自定义背景颜色。theme.colors tailwind.config.js theme.backgroundColor

当您确实需要自定义调色板时，您可以在文件部分colors中的键下配置颜色：theme tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

在构建自定义调色板时，有两种方式，第一，您可以从我们广泛的调色板中选择您的颜色。第二。您也可以通过直接添加特定的颜色值来配置您自己的自定义颜色。

1. 使用Tailwind 配置部分仅自定义背景颜色

如果您没有为项目考虑一套完全自定义的颜色，您可以通过导入'tailwindcss/colors'配置文件并选择您喜欢的颜色来从我们的完整调色板中挑选您的颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

请参考 完整的调色板参考

2. 自定义调色板

您可以通过从头开始添加自己的颜色值来构建完全自定义的调色板：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

默认情况下，这些颜色会被所有颜色驱动的实用程序自动共享，例如、、textColor等等。backgroundColorborderColor

扩展默认设置

如主题文档中所述，如果您想要扩展默认调色板而不是覆盖它，则可以使用文件theme.extend.colors 的部分来实现tailwind.config.js：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

bg-regal-blue除 Tailwind 的所有默认颜色外，这还将生成类似的类别。

这些扩展已深度合并，因此如果您想在 Tailwind 的默认颜色之一中添加其他色调，可以这样做：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

这将添加类似的类 bg-blue-450，而不会丢失现有的类，如 bg-blue-400 或 bg-blue-500

解决

在项目中，我们只需新增一个自定义的背景色，所以最有效的办法是扩展默认配置，因此我们在tailwind.config.js加入如下配置：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        tab_background: '#F1F5FF',
      }
    }
  }
}

再在组件中用class name申明背景色样式：

<div class="bg-tab_background"></div>