互动按钮 尝试一下 » 扩展深色模式 在某些情况下,你可能需要针对深色模式提供额外的颜色或样式,可以通过 theme.extend 自定义 Tailwind 配置。 module.exports={theme:{extend:{colors:{brand:{DEFAULT:'#1DA1F2',dark:'#0d74b8',},},},},} 在HTML 中使用扩展颜色: 实例 定制深色模式颜色! 尝试...
使用Tailwind CSS 在深色模式下为您的网站设置样式。 现在深色模式是很多操作系统的首要功能,设计一个深色版的网站来配合默认的设计变得越来越普遍。 为了使此操作尽可能简单,Tailwind 包含一个dark变体,当启用深色模式时,您可以为您的网站设置不同的样式:
关于 <!--深色模式切换按钮 --> <!-- 亮色模式图标 --> <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" > <path d="M10 2a1 1
const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')const selectorParser = require('postcss-selector-parser')module.exports = {// purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],darkMode: , // or 'media' or 'class'theme: { c...
app.css @import"tailwindcss";@custom-variantdark (&:where([data-theme=dark], [data-theme=dark] *)); Now dark mode utilities will be applied whenever thedata-themeattribute is set todarksomewhere up the tree: HTML <!-- ... --> With system theme support To build three-way theme togg...
根据tailwindcss 官方文档,要实现这个还是很简单的: 首先就是要在 tailwind.config.js 文件启用: module.exports={darkMode:'class',...} 它有两种模式,一个是 class 另一个是 media。class 模式的意思就是在最上层 DOM 标签的 class 属性里添加 dark 或 light。而 media 就是跟随系统配置。这两种模式的不...
首先,让我们从 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:...
/* ./src/index.css */@tailwindbase;@tailwindcomponents;@tailwindutilities;.theme-dark{background: black!important;color: white!important; }.theme-high{background: white!important;color: black!important; } 使用方式也很简单 consttheme =ref("dark") ...
yarnaddtailwindcss postcss autoprefixer 安装完成后,在项目根目录下创建一个名为tailwind.config.js的配置文件,内容如下: // tailwind.config.jsmodule.exports= { purge: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],// 配置需要清理的文件darkMode:false,// 开启暗黑模式theme: { ...
<svgclass="w-6 h-6 text-gray-800 dark:text-gray-200"fill="currentColor"viewBox="0 0 24 24"><!-- 图标路径 --></svg> 性能优化 按需加载样式 使用CSS 变量优化样式切换: // tailwind.config.jsmodule.exports={theme:{extend:{colors:{primary:'var(--color-primary)',background:'var(--col...