在Tailwind CSS 中,背景颜色(Background Color)是最常用的工具类之一,它允许你快速为元素设置背景颜色。 Tailwind 提供了多种颜色选项以及不同的色调,确保你能灵活地应用所需的样式。 背景颜色基本语法: <divclass="bg-{color}"><!-- 内容 --></div> 常见的背景颜色类: 背景颜色的渐变(Gradient): Tailwind ...
import './App.css'; function App() { return ( <div className='text-base p-1 border border-black border-solid'>guang</div> ); } export default App; 我们执行 npm run start 把开发服务跑起来。 可以看到,它正确的加上了样式: 用到的这些原子 class 就是 tailwind 提供的: 这里的 p-1 是...
<div class="flex items-center"> <div class="flex-shrink-0"> <img class="h-8 w-8" src="/logo-light.svg" alt="Logo"> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-4"> <a href="#" class="text-gray-900 dark:text-white hover:bg-gra...
Use thebg-[<value>]syntaxto set thebackground colorbased on a completely custom value: <divclass="bg-[#50d71e]..."><!-- ... --></div> For CSS variables, you can also use thebg-(<custom-property>)syntax: <divclass="bg-(--my-color)..."><!-- ... --></div> ...
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)...
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)...
supports-[...] 特性查询,用来判断浏览器是否支持某些 css 特性,例如:@supports (display: grid) { ... }supports-[display:grid]:grid 其他 属性选择器 aria-* 属性选择器 <div aria-checked="true" class="aria-checked:bg-sky-700"> <th aria-sort="ascending" class="aria-[sort=ascending]:bg-[...
// tailwind.config.jsmodule.exports = { ... variants: {extend: {textOpacity: ['dark'],backgroundColor: [], } } ...} 然后再增加一个支持暗黑模式的插件tailwindcss-dark-mode const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')const selectorPars...
前文说过,TailwindCSS是典型的原子化CSS(Atomic),对比传统的语义化CSS(Semantic)还是有一些特点和区别。 举个官网的例子,开发一个消息提示: 消息 如果使用的是语义化的开发,那么代码可能长这样: 代码语言:html 复制 <divclass="chat-notification"><divclass="chat-notification-logo-wrapper"><imgclass="chat-noti...
<divclass="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">...</div> 其中每个class代表一个定义好的CSS规则,比如: p-6代表padding: 1.5rem; /* 24px */ bg-white代表background-color: white;