当前位置: 首页 > news >正文

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>

相关文章:

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

背景 项目里多个Tab标签都需要设置同样的背景颜色#F1F5FF&#xff0c;在集成tailwindcss之前就是重复该样式&#xff0c;如下图&#xff1a; .body {background-color: #f1f5ff; }集成tailwindcss时&#xff0c;我们希望在class中直接设置该背景色&#xff0c;但是默认的tai…...

C++设计模式---享元模式

1、介绍 原理&#xff1a; 享元模式是一种主要用于减少创建对象的数量&#xff0c;以减少内存占用和提高性能的结构型设计模式。它通过共享多个对象所共有的相同状态&#xff0c;使得在有限的内存容量中能够载入更多的对象。具体来说&#xff0c;享元模式将对象的状态分为内部…...

智慧园区大数据云平台建设方案(Word原件)

第一章 项目建设背景及现状 第二章 园区创新发展趋势 第三章 工业园区大数据存在的问题 第四章 智慧工业园区大数据建设目的 第五章 智慧园区总体构架 第六章 系统核心组件 第七章 智慧工业园区大数据平台规划设计 获取方式&#xff1a;本文末个人名片直接获取。 软件资料清单…...

【学习】如何利用Python技术进行软件测试相关工作

Python是一种广泛使用的高级编程语言&#xff0c;它因其简洁的语法、强大的库支持和跨平台特性而受到开发者的喜爱。在软件测试领域&#xff0c;Python同样发挥着重要作用&#xff0c;它可以帮助测试人员编写自动化测试脚本、进行接口测试、性能测试、以及处理测试数据等。以下…...

Qt:3.项目创建、对象树、乱码问题、Qt命名规则

目录 1.创建项目&#xff1a; 2.Qt可以支持两套基础类&#xff1a; 3.节点的父子关系和对象树&#xff1a; 4.QLabel类&#xff1a; 5.乱码问题&#xff1a; 6.Qt命名规则&#xff1a; 1.创建项目&#xff1a; qt的项目中有一个以.ui为后缀的文件&#xff0c;他本质是一个…...

C# 入门—实现 Hello, World!

目录 一、.net 平台 二、.net 都能干什么&#xff1f; 三、.net 两种交互模式 四、使用 VS Code 开发 C# 程序 五、实现 Hello, World! 一、.net 平台 下载 .NET(Linux、macOS 和 Windows) (microsoft.com) .NET 简介 - .NET | Microsoft Learn C# :一种编程语言,可以开…...

【项目实训】前端页面初探索(前期探索)

前期&#xff0c;由于没有确定页面展示形式&#xff0c;于是进行了很多探索 首先安装element-ui 导入elemnt-plus 添加use: 设置一个全局样式 编写导航栏 <el-menu:default-active"activeIndex"class"el-menu-demo"background-color"#95d475&quo…...

机器人控制系列教程之动力学建模(2)

接昨天的推文&#xff1a;https://editor.csdn.net/md/?articleId139991958 &#xff0c;动力学的求解通常是个相对比较复杂的过程&#xff0c;但现在基本上不用人工来推算求解各种公式和求解过程了&#xff0c;大家只需要知道其中的步骤即可&#xff0c;现代对于动力学问题的…...

Golang | Leetcode Golang题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; func numIslands(grid [][]byte) int {res : 0for i : 0; i < len(grid); i {for j : 0; j < len(grid[i]); j {if grid[i][j] 1 {resdfs(grid, i, j)}}}return res }func dfs(grid [][]byte, r, c int) {h, w : len(grid), len(gri…...

Linux系统启动流程

init程序类型&#xff1a; ①、SysV&#xff1a;init&#xff0c;centos 5之前&#xff0c;配置文件/etc/init.d/ ②、Upstart: init&#xff0c;centos 6&#xff0c;配置文件/etc/init.d/ /etc/init/ ③、Systemd:Systemd&#xff0c;centos 7&#xff0c;配置文件/usr/li…...

Vue 学习之 axios

目录 执行安装命令&#xff1a;npm install axios 使用的时候导入 axios以data&#xff0c;params&#xff0c;headers传参方式的区别 axios封装 是一个基于 promise 的 网络请求库&#xff0c;作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求…...

Python学习笔记17 -- 猜数字小游戏2

目录 一、功能函数 1、说明函数 -- 对游戏玩法及设置进行说明 2、答案函数 -- 生成答案 3、猜测函数 -- 让玩家进行猜测 4、对照函数 -- 将答案和猜测进行对照 4.1 A函数 4.2 B函数 5、结果函数 -- 判断得到结果或继续猜测 6、时间函数 -- 判断一局游戏所用时间 7、打…...

【系统架构设计师】七、信息安全技术基础知识(信息安全的概念|信息安全系统的组成框架|信息加解密技术)

目录 一、信息安全的概念 1.1 信息安全的基本要素和范围 1.2 信息存储安全 1.3 网络安全 二、信息安全系统的组成框架 2.1 技术体系 2.2 组织机构体系 2.3 管理体系 三、 信息加解密技术 3.1 数据加密 3.2 对称加密技术 3.3 非对称加密算法 3.4 数字信封 3.5 信…...

CMMM Plus+ Calculus Update 超级游戏大作 游戏说明

资源链接 Scratch超级生命模拟游戏&#xff1a;CMMMPlusCalculusUpdate.sb3资源-CSDN文库 关卡编辑器 ◽️使用 WASD 移动视图。 ◽️LMB 放置单元格。 ◽️Space LMB 删除单元格。Ctrl Space LMB 删除所有相同类型的单元格。 ◽️Q / E 旋转单元格。 ◽️Z / X 在单元格类…...

Java OA系统任务协作模块

以下是一篇关于构建高效且功能丰富的OA系统任务协作模块的博客文章&#xff0c;采用了Spring Boot、Spring Data JPA和React等主流技术。文章不仅展示了项目的基本实现&#xff0c;还介绍了如何优化代码和增加新的功能&#xff0c;以提升系统的性能和用户体验。 --- ## 构建高…...

深入解析Maven常用命令

目录 什么是 MavenMaven 的安装与配置Maven 项目结构Maven 常用命令 mvn cleanmvn compilemvn testmvn packagemvn installmvn deploymvn sitemvn dependencymvn help 总结 什么是 Maven Maven 是由 Apache 软件基金会开发的一个项目管理和构建工具。它基于项目对象模型&…...

【Docker】镜像

目录 1. 镜像拉取 2. 镜像查询 3. 镜像导出 4. 镜像上传 5. 镜像打标签 6. 镜像上推 7. 镜像删除 8. 镜像运行及修改 8.1 在registry 节点运行 mariadb 镜像&#xff0c;将宿主机 13306 端口作为容器3306 端口映射 8.2 查看容器ID 8.3 进入容器 8.4 创建数据库xd_d…...

力扣最新详解5道题:两数之和三数之和四数之和

目录 一、查找总价格为目标值的两个商品 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;对撞指针 二、两数之和 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;哈希表法 三、三数之和 题目 题解 方法一&#xff1a;排序暴力枚举set去重 …...

通讯:单片机串口和电脑通讯

目录 1.串口输出数据到电脑 硬件部分 串口输出数据到电脑的软件软件部分&#xff1a; 相关问题&#xff1a; 2.单片机串口--485--485转USB--电脑 串口&#xff0c;芯片&#xff0c;转换器&#xff0c;设备之间的通讯的接线&#xff0c;都是要TX--RX, RX--TX 交叉连接。 单…...

ubuntu22.04 设置双屏

一 概述 最近把ubuntu18.04 升级到 22.04 双屏显示出来问题&#xff0c;在此记录下解决问题方案。二 解决方案 1 使用命令查看能检测到显示器 xrandr根据输出的信息&#xff0c;我们可以知道 HDMI-0 与 DP-0 是connected 。检测到两个显示器 2 设置输出显示器分辨率 由于我…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...