md:text-gray-900 md:focus:text-red-600 ..."> Customizing Text Colors By default Tailwind makes the entire default color palette available as text colors. You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your text colors in the...
背景为半透明的蓝色 使用Tailwind 配置中的自定义背景颜色: 你可以在tailwind.config.js配置文件中自定义背景颜色。通过在theme.extend部分的colors属性下定义颜色,你可以扩展默认的颜色集。 实例 module.exports={ theme:{ extend:{ colors:{ 'custom-blue':'#1D4ED8', 'custom-gray':'#4B5563', } } }...
Tailwind CSS's text-* utility classes enable easy customization of text colors. Each class combines a color identifier ('red', 'blue', etc.) with a numeric value ('300', '400', '500') indicating the shade intensity from lightest to darkest....
产品 关于 <!--深色模式切换按钮 -->
exports = { theme: { extend: { colors: { 'custom-blue': '#007bff', }, }, }, } 配置完成后,就可以在HTML中使用text-custom-blue类来应用自定义的蓝色了。 HTML和CSS代码示例: 下面是一个使用Tailwind CSS设置文字颜色的HTML和CSS代码示例: html <!DOCTYPE html> <html lang="en"...
module.exports={theme:{extend:{colors:{brand:{DEFAULT:'#1DA1F2',dark:'#0d74b8',},},},},} 在HTML 中使用扩展颜色: 实例 定制深色模式颜色! 尝试一下 » 实例 以下是一个实现深色模式切换的完整示例: 实例 欢迎来到深色模式 切换模式 const toggle = ...
// tailwind.config.jsmodule.exports={theme:{colors:{transparent:'transparent',black:'#000',white:'#fff',gray:{100:'#f7fafc',// ...900:'#1a202c',},// ...}}} 默认情况下,这些颜色会被所有与颜色相关的核心插件继承,比如backgroundColor、borderColor、textColor等。
-- 基础页面结构 --><!-- 导航栏 --><arel="nofollow"href="#"class="text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700
Styled text Tailwind Colors Tailwind CSS 提供了可自定义的默认调色板。颜色由颜色名称和阴影组合而成。 bg-{color}-{shade}:设置背景颜色。 text-{color}-{shade}:设置文本颜色。 border-{color}-{shade}:设置边框颜色。 举例说明: Button 用于响应...
Click 过渡 transition-[type]:过渡类型,type 取值为 none、all、colors、opacity、shadow、transform duration-[ms]:过渡时长,ms 取值为 75、100、150、200、300、500、700、1000 ease-[type]:过渡效果,type 取值为 linear、in、out、in-out delay-[ms]:延时时长,ms 取值为 75、100、150、200、300、500...