首页 产品 关于 <!-- 深色模式切换按钮 -->
使用Tailwind CSS 在深色模式下为您的网站设置样式。 现在深色模式是很多操作系统的首要功能,设计一个深色版的网站来配合默认的设计变得越来越普遍。 为了使此操作尽可能简单,Tailwind 包含一个dark变体,当启用深色模式时,您可以为您的网站设置不同的样式:
首先,让我们从 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:...
function toggleDarkMode(e) { e.preventDefault(); document.documentElement.classList.toggle('dark'); } 这个示例展示了如何在一个简单的HTML页面中使用Tailwind CSS来实现深色模式的切换。通过在body和其他元素上使用带前缀的类(如dark:bg-gray-100),Tailwind CSS可以在深色模式激活时自动应用这些类,实现不...
Using Tailwind CSS to style your site in dark mode. Basic usage Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design. To make this as easy as possible,...
Tailwind 使用dark变量来定义深色样式(默认浅色),默认情况下,是使用 CSS 媒体查询prefers-color-scheme来识别系统模式并展示具体样式,示例代码:
个人是在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 Css的基础配置 config文件配置 1.配置`content: ["./src/**/*.{js,jsx,ts,tsx}"]`,告知tailwind 项目文件在哪个目录 2.配置`darkMode: "class"`,告知tailwind我想手动切换颜色模式 css文件配置(引入tailwind的样式文件) 切换背景色和文字颜色的CSS配置 ...
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': 自定义颜色:接下来,在同一个配置文件中,你可以通过修改theme.colors对象来自定义深色模式下的颜色。你可...