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

背景

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

css 复制代码
.body {
	background-color: #f1f5ff;
}

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

Tailwindcss 定制

自定义调色板

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

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

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

javascript 复制代码
// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

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

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

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

javascript 复制代码
// 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. 自定义调色板

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

javascript 复制代码
// 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

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

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

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

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

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

解决

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

javascript 复制代码
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        tab_background: '#F1F5FF',
      }
    }
  }
}

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

html 复制代码
<div class="bg-tab_background"></div>
相关推荐
开心工作室_kaic22 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā23 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js