在Tailwind CSS 中,背景颜色(Background Color)是最常用的工具类之一,它允许你快速为元素设置背景颜色。 Tailwind 提供了多种颜色选项以及不同的色调,确保你能灵活地应用所需的样式。 背景颜色基本语法: <!-- 内容 --> 常见的背景颜色类: 背景颜色的渐变(Gradient): Tailwind CSS 支持背景的线性渐变、径向渐变等...
background-color: var(--color-red-300);/* oklch(0.808 0.114 19.571) */ bg-red-400 background-color: var(--color-red-400);/* oklch(0.704 0.191 22.216) */ Examples Basic example Use utilities likebg-white,bg-indigo-500andbg-transparentto control the background color of an element: ...
background-color: var(--bg-primary); } .text-theme { color: var(--text-primary); } .border-theme { border-color: var(--border-primary); } // 使用 CSS 包含查询优化选择器性能 @container (prefers-color-scheme: dark) { .dark-container { background-color: var(--bg-primary); color:...
bg-black--tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); bg-white--tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); bg-gray-50--tw-bg-opacity: 1; background-color: rgba(249, 250, 251, var(--tw-bg-opacity)...
Tailwind CSS Background Color is a utility class that specifies the element's background color. There are a lot of color that you can use in 10 different shades to set the background-color of any element.Tailwind CSS Background Color Classes...
现代CSS框架:Tailwind CSS Tailwind CSS是一个与Bootstrap、Element等不同的CSS框架,它没有类似btn这样的组件样式,而是基于Utility构建的一套CSS。 Tailwind CSS的理念是提供一套完整的,最小单位的工具类CSS,再由设计师将它们组合起来。 例如,p-4表示padding:1rem,bg-white表示background-color:#fff,flex表示...
// tailwind.config.jsmodule.exports = { ... variants: {extend: {textOpacity: ['dark'],backgroundColor: [], } } ...} 然后再增加一个支持暗黑模式的插件tailwindcss-dark-mode const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')const selectorPars...
背景颜色(color) 语法： background-color:颜色值; 默认的值是 transparent 透明的 背景图片(image...
// 生成的 css.bg-sky-500{ background-color:#0ea5e9;} .hover\:bg-sky-700:hover { background-color:#0369a1;} Pseudo-classes, like :hover, :focus, :first-child, and :required 伪类 hover focus focus-within 用来选择和样式化一个元素或者它的任何后代元素获得焦点的情况 focus-visible...
This element has a custom blue background color. In the above example, a custom color called custom-blue is defined in the Tailwind CSS configuration file. The bg-custom-blue class is applied to the element, setting its background color to the defined custom blue color. Responsive Tailwind...