【tailwind】黑暗模式

最新推荐文章于 2024-08-19 10:22:37 发布

Yomuki

最新推荐文章于 2024-08-19 10:22:37 发布

阅读量1.2k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/Yomuki/article/details/114259285

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

官方文档 https://tailwindcss.com/docs/dark-mode

默认情况下，Tailwind不启用暗模式。

启用黑暗模式

tailwind.config.js

// tailwind.config.js
module.exports = {
  // media 根据系统自动切   class 手动切
  darkMode: 'media',
  // ...
}

使用黑暗模式

自动模式 media 下

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

手动模式calss下

通过改变html标签的class属性切换

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

其他样式启用黑暗模式

默认启用的样式：

backgroundColor, borderColor, gradientColorStops, placeholderColor, and textColor.

其他样式需要添加如下：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

Yomuki

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【tailwind】黑暗模式

官方文档 https://tailwindcss.com/docs/dark-mode默认情况下，Tailwind不启用暗模式。启用黑暗模式tailwind.config.js// tailwind.config.jsmodule.exports = { // media 根据系统自动切 class 手动切 darkMode: 'media', // ...}使用黑暗模式自动模式 media 下<div class="bg-white dark:bg
复制链接

扫一扫

专栏目录