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-400bg-blue-500

解决

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31113.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker 安装与常用指令

1. docker 安装 sudo yum install -y yum-utilssudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.reposudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-pluginsudo systemctl enable do…

Windows11平台C++在VS2022中安装和使用Matplot++绘图库的时候出现的问题和解决方法

Matplot 是一个基于 C 的绘图库&#xff0c;专门用于绘制高质量的数据图表。它提供了一个简洁而强大的接口&#xff0c;使得用户能够轻松地创建各种类型的图表&#xff0c;包括线图、散点图、柱状图、饼图等。Matplot 的设计目标是提供与 MATLAB 相似的绘图体验&#xff0c;同时…

在编译内核时添加驱动的固件

最近调驱动时&#xff0c;无法正常加载引导。 使用的内核5.10 内核启动先于文件系统&#xff0c;内核启动时驱动无法访问固件文件&#xff0c;所以无法加载驱动。 有2个办法&#xff0c;可以解决&#xff0c;一是驱动编译KO模块&#xff0c;系统启动后&#xff0c;再动态加载…

Spring Boot 3 整合 SpringDoc OpenAPI 生成接口文档

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Flutter知识点

Dart语言基础知识 Dart特性&#xff1a; Dart 是少数同时支持 JIT&#xff08;Just In Time&#xff0c;即时编译&#xff09;和 AOT&#xff08;Ahead of Time&#xff0c;运行前编译&#xff09;的语言之一。语言在运行之前通常都需要编译&#xff0c;JIT 和 AOT 则是最常见…

HCIP-HarmonyOS Device Developer 课程大纲

一&#xff1a;系统及应用场景介绍 1 -&#xff08;3 课时&#xff09; - HarmonyOS 系统介绍&#xff1b;HarmonyOs 定义&#xff1b;HarmonyOS 特征&#xff1b; - 统一 OS&#xff0c;弹性部署&#xff1b;硬件互助&#xff0c;资源共享&#xff1b;一次开发&#xff0c;多…

vue3插槽slot的使用

一&#xff0c;默认插槽 父组件页面&#xff1a;使用子组件标签 <template><div>我是父组件自己的内容</div><ComTest></ComTest> // 这里使用子组件的内容<!-- <ComTest>我要替换默认插槽的内容</ComTest> // 这里替换子组件…

Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装

Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装 目录 Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装 一、简单介绍 二、实现原理 三、注意实现 四、简单效果预览 五、案例简单实现步骤 六、关键代码 一、简单介绍 Unit…

使用Python进行数据可视化:从基础到高级

使用Python进行数据可视化:从基础到高级 数据可视化是数据分析过程中不可或缺的一部分,通过图形化的方式展示数据,可以更直观地发现数据中的趋势和模式。Python凭借其丰富的库和强大的功能,成为数据可视化的首选编程语言。本文将介绍数据可视化的基础概念、常用的Python库…

网络安全:Web 安全 面试题.(XSS)

网络安全&#xff1a;Web 安全 面试题.&#xff08;XSS&#xff09; 网络安全面试是指在招聘过程中,面试官会针对应聘者的网络安全相关知识和技能进行评估和考察。这种面试通常包括以下几个方面&#xff1a; &#xff08;1&#xff09;基础知识:包括网络基础知识、操作系统知…

超级好用的JSON格式化可视化在线工具

JSON是开发非常常用的一种报文格式&#xff0c;最常见的需求就是将JSON进行格式化&#xff0c;最好是有图形化界面显示结构关系&#xff0c;以便进行数据分析。 理想的在线JSON工具&#xff0c;应该支持快速格式化、可压缩、快捷复制、可下载导出&#xff0c;对存在语法错误的地…

Python之三大基本库——Numpy(1)

最近呢学了一些关于python的一些功能&#xff0c;为了更方便快捷高效的实现项目&#xff0c;我们要熟知python的三个基本库&#xff1a;numpy、pandas、matplotlib的功能。由于我也是入门新手&#xff0c;所以先做一些基本的总结&#xff0c;后续有进阶的话会再来更新。 一、Nu…

POI导入带有合并单元格的excel,demo实例,直接可以运行

直接可以运行 import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet; import org.apache.poi.ss.usermodel.Workbook; import org.apache.poi.s…

网络与协议安全复习 - 系统安全部分

文章目录 恶意软件什么是恶意软件传播机制和载荷传播载荷 DDoS 攻击和防范 防火墙什么是防火墙防火墙类型防火墙载体 入侵检测入侵者入侵检测蜜罐技术 口令管理基于Bloom过滤器的口令检查技术 恶意软件 什么是恶意软件 恶意软件定义为&#xff1a;隐蔽植入另一段程序的程序&a…

使用 XML 配置定义和管理 Spring Bean

Spring 框架提供了多种方式来定义和管理 Bean&#xff0c;XML 配置是其中一种传统且强大的方式。尽管现在更多的项目使用基于注解的配置&#xff0c;但了解 XML 配置在理解 Spring 的工作原理和处理遗留系统时仍然非常重要。本文将详细介绍如何使用 XML 配置来定义和管理 Sprin…

数据赋能(125)——体系:数据格式化——实施过程、应用特点

实施过程 数据格式化的实施过程通常涉及以下几个关键步骤&#xff1a; 需求分析&#xff1a; 明确数据格式化的目标和需求&#xff0c;例如是为了数据展示、存储、传输还是其他目的。确定需要格式化的数据类型和格式&#xff0c;例如日期、数字、文本等。数据准备&#xff1a…

Node.js单点登录SSO详解:Session、JWT、CORS让登录更简单

文章目录 一、SSO介绍1、使用SSO的好处 二、中间件介绍1、Express安装导入使用 2、cors安装导入配置 3、express-session安装导入配置使用 4、jsonwebtoken安装导入使用 5、jwt和session对比 三、SSO实现方案1、安装依赖2、结构3、实现原理 三、示例代码1、nodejs端 server/ind…

React是怎么进行事件处理的

什么是事件&#xff1f; 事件是指一些可以通过脚本响应的页面动作。当用户按下鼠标或者提交一个表单等等时候&#xff0c;事件都会出现。事件处理是一段JavaScript代码&#xff0c;总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分相关联的事件发生时&#xff0c…

MDK-ARM 编译后 MAP 文件分析

本文配合 STM32 堆栈空间分布 食用更佳&#xff01; 一图胜千言。。。

pytorch十大核心操作

PyTorch的十大核心操作涵盖了张量创建、数据转换、操作变换等多个方面。以下是结合参考文章信息整理出的PyTorch十大核心操作的概述&#xff1a; 张量创建&#xff1a; 从Python列表或NumPy数组创建张量。使用特定值创建张量&#xff0c;如全零、全一、指定范围、均匀分布、正…