使用Tailwind CSS 在深色模式下为您的网站设置样式。 现在深色模式是很多操作系统的首要功能,设计一个深色版的网站来配合默认的设计变得越来越普遍。 为了使此操作尽可能简单,Tailwind 包含一个dark变体,当启用深色模式时,您可以为您的网站设置不同的样式:
/**@type{import('tailwindcss').Config}*/module.exports={darkMode:['variant','&:not(.light *)'],// ...} When using this strategy Tailwind will not modify the provided selector in any way, so be mindful of it’s specificity and consider using the:where()pseudo-class to ensure it ...
首页 产品 关于 <!-- 深色模式切换按钮 -->
这个方案最大的缺点就是,本来只需要一个tailwind.config 的文件,现在还需要多个 css 文件(main.css / theme-light.css / theme-dark.css / … 即使我们可以使用一个入口main.css引入其余的css,这也会导致项目中需要多一行import 'my-tailwind.css'之类的文件,所以我个人认为仍然是有优化空间的。 方案4: 类名...
function toggleDarkMode(e) { e.preventDefault(); document.documentElement.classList.toggle('dark'); } 这个示例展示了如何在一个简单的HTML页面中使用Tailwind CSS来实现深色模式的切换。通过在body和其他元素上使用带前缀的类(如dark:bg-gray-100),Tailwind CSS可以在深色模式激活时自动应用这些类,实现不...
配置深色模式:首先,你需要在Tailwind的配置文件中启用深色模式。打开tailwind.config.js文件,并将darkMode属性设置为'media'或'class',分别表示通过媒体查询或CSS类来启用深色模式。例如,将darkMode设置为'media': 配置深色模式:首先,你需要在Tailwind的配置文件中启用深色模式。打开tailwind.config.js文件,并将darkMode...
// tailwind.config.jsmodule.exports={darkMode:'media',// ...} The "media" option is now set by default if you use version 3.x of Tailwind CSS. Dark mode switcher# If you want to create a dark mode switcher for Tailwind CSS and Flowbite you’ll have to add some JavaScript code ...
个人是在typo.module.css中使用了@apply: 代码语言:javascript 复制 .typo nav>ol{@apply backdrop-blur bg-white/60dark:bg-[#121212]/60;} 生成之后,漏了一个dark:没有生成。 猜测是和 TailwindCSS的 darkMode 的 class 机制有关。 解决 修改tailwind.config.js: ...
要支持用户手动切换浅色/深色模式,需要将 Tailwind 的darkMode设置为class而不是默认的media,代码示例: tailwind.config={darkMode:'class'} 配置完毕后,开启深色模式,只需给html标签的class属性加上值dark即可,代码如下: <!-- 未开启深色模式 --><!-- 白色背景...
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了