在Tailwind CSS 中,背景颜色(Background Color)是最常用的工具类之一,它允许你快速为元素设置背景颜色。 Tailwind 提供了多种颜色选项以及不同的色调,确保你能灵活地应用所需的样式。 背景颜色基本语法: <!-- 内容 --> 常见的背景颜色类: 背景颜色的渐变(Gradient): Tailwind CSS 支持背景的线性渐变、径向渐变等...
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)...
Use thebg-[<value>]syntaxto set thebackground colorbased on a completely custom value: <!-- ... --> For CSS variables, you can also use thebg-(<custom-property>)syntax: <!-- ... --> This is just a shorthand forbg-[var(<custom-property>)]that adds thevar()function ...
首先,让我们从 Tailwind CSS 的基础配置开始: // tailwind.config.js module.exports = { darkMode: 'class', // 或者使用 'media' theme: { extend: { colors: { // 自定义深色模式颜色 dark: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af',...
// tailwind.config.jsmodule.exports = { ... variants: {extend: {textOpacity: ['dark'],backgroundColor: [], } } ...} 然后再增加一个支持暗黑模式的插件tailwindcss-dark-mode const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')const selectorPars...
首先,让我们从 Tailwind CSS 的基础配置开始: // tailwind.config.jsmodule.exports={darkMode:'class',// 或者使用 'media'theme:{extend:{colors:{// 自定义深色模式颜色dark:{50:'#f9fafb',100:'#f3f4f6',200:'#e5e7eb',300:'#d1d5db',400:'#9ca3af',500:'#6b7280',600:'#4b5563',700:...
// tailwind.config.js module.exports = { ... theme: { extend: { colors: { theme: 'white dark:black' } } } ... } 很遗憾,dark:毕竟是类名而不是颜色值,因此tailwind并不支持这样的写法。 但是!Tailwind是支持CSS变量的。比如你可以写成 ...
selection 是一个CSS伪元素选择器,它可以用来给用户选中的文本添加样式 first-line 首行 first-letter 首字 backdrop ::backdrop在任何处于全屏模式的元素下的即刻渲染的盒子(并且在所有其他在堆中的层级更低的元素之上) 媒体查询 使用方法: 在实用程序类前添加sm:bg-sky-700 ...
The bg-custom-blue class is applied to the element, setting its background color to the defined custom blue color. Responsive Tailwind Background Color Tailwind CSS allows you to apply background colors responsively at different breakpoints. To use responsive Tailwind background color classes...
一文掌握 Tailwind CSS 基础工欲善其事,必先利其器先推荐一些好用的工具: TailWind CSS 代码提示功能 vscode 插件:Tailwind CSS IntelliSense Tailwind CSS 速查网站:https://tailwind.muzhifan.top/注:本文假定你已经有一定的 CSS 基础1 宽高1.使用预定义类名...