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>
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554326 小时前
element动态表头合并表格
开发语言·javascript·ecmascript