首页 产品 关于 <!-- 深色模式切换按钮 -->
默认情况下,dark变体只对backgroundColor、borderColor、gradientColorStops、placeholderColor和textColor启用。 手动切换深色模式 如果要支持手动切换深色模式而不是依赖于操作系统首选项,请使用class策略代替media策略: // tailwind.config.jsmodule.exports={darkMode:'class',// ...} ...
我们知道如果用户的系统设置为深色模式的话,我们是可以通过媒体查询属性prefers-color-shceme: dark读取到的,因此我们就能以此为根据写出日间/夜间模式两套变量 :root { --theme-color: white; } @media (prefers-color-scheme: dark) { :root { --theme-color: black; } } // tailwind.config.js colors: ...
打开tailwind.config.js文件,并将darkMode属性设置为'media'或'class',分别表示通过媒体查询或CSS类来启用深色模式。例如,将darkMode设置为'media': 配置深色模式:首先,你需要在Tailwind的配置文件中启用深色模式。打开tailwind.config.js文件,并将darkMode属性设置为'media'或'class',分别表示通过媒体查询或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)...
background-color:颜色值; 默认的值是 transparent 透明的 背景图片(image) 语法： background-imag...
These modifiers can even be stacked to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover: 这些修饰符甚至可以堆叠 Save changes When you need to style an element based on the state of some...
/**@type{import('tailwindcss').Config}*/module.exports={darkMode:['variant',['@media (prefers-color-scheme: dark) { &:not(.light *) }','&:is(.dark *)',]],// ...} From the creators of Tailwind CSS Make your ideas look awesome, without relying on a designer. ...
darkMode: "class", }; .toggle-checkbox:checked { right: 0; border-color: #68d391; } .toggle-checkbox:checked + .toggle-label { background: #68d391; } Title Irure dolor ut excepteur ea cupidatat dolor dolore consectetur sit voluptate qui et deserunt. ...
.bg-blue { background-color: rgb(81, 191, 255); } 如果将此类添加到标签中,它将获得蓝色背景,颜色如上面代码rgb(81, 191, 255)所示。 HTML 如下: <!DOCTYPE html> Document Hello world! 效果如下: # ON 我们可以编写这种单一用途的 CSS 规则...