90后做网站赚了,做英文网站哪家好,wordpress调用用户名,如何做好企业网站的推广背景
项目里多个Tab标签都需要设置同样的背景颜色#F1F5FF#xff0c;在集成tailwindcss之前就是重复该样式#xff0c;如下图#xff1a;
.body {background-color: #f1f5ff;
}集成tailwindcss时#xff0c;我们希望在class中直接设置该背景色#xff0c;但是默认的tai…背景
项目里多个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 classbg-tab_background/div
