tailwindcss 官网（五）核心概念：深色模式、添加基础样式Preflight、提取组件

最新推荐文章于 2025-03-30 10:08:41 发布

ChrisP3616

最新推荐文章于 2025-03-30 10:08:41 发布

阅读量1k

点赞数 2

分类专栏：前端工程师1——汇总前端工程师6——CSS预处理、CSS框架文章标签： html html5 css tailwindcss

本文链接：https://blog.csdn.net/qq_43456781/article/details/120256600

版权

本文介绍了Tailwind CSS的核心概念，包括如何实现深色模式，添加基础样式 Preflight，以及如何提取和管理组件。深色模式允许根据用户操作系统设置或手动切换。Preflight提供了一套全局基础样式，简化了UI开发。同时，文章探讨了如何在项目中自定义和扩展Preflight。最后，文章讨论了组件提取的重要性，以保持代码的可维护性，并提供了使用`@apply`指令抽取组件类的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tailwindcss 官网（五）核心概念：深色模式、添加基础样式Preflight、提取组件

文章目录

tailwindcss 官网（五）核心概念：深色模式、添加基础样式Preflight、提取组件

官网：安装 - Tailwind CSS 中文文档

4. 深色模式

使用 Tailwind CSS 在深色模式下为您的网站设置样式。

现在深色模式是很多操作系统的首要功能，设计一个深色版的网站来配合默认的设计变得越来越普遍。

为了使此操作尽可能简单，Tailwind 包含一个 dark 变体，当启用深色模式时，您可以为您的网站设置不同的样式：

<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>

请务必注意，出于文件大小的考虑，默认情况下，Tailwind 未开启深色模式变体。

要启用深色模式，请在 tailwind.config.js 文件中把 darkMode 选项设置为 media：

// tailwind.config.js
module.exports = {
   
  darkMode: 'media',
  // ...
}

现在，只要用户的操作系统开启了深色模式，dark:{class} 类将优先于无前缀的类。media 策略在底层使用 prefers-color-scheme 媒体功能，但是，如果您想支持手动切换深色模式，您也可以使用 ‘class’ 策略进行更多控制。

默认情况下，当 darkMode 启用时，只会为颜色相关的类生成 dark 变体，包括文本颜色、背景颜色、边框颜色、渐变色以及占位符颜色。

与其它变体结合使用

dark 变体可以与响应式变体和状态变体结合使用：

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>

为了使其正常工作，您必须把响应式变体要在最前面，然后是 dark 变体，最后是状态变体。

为其它功能类启用深色模式

要想为其它功能启用 dark 变体，把 dark 添加到您想要启用的任何功能的变体列表中。

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

默认情况下，dark 变体只对 backgroundColor、borderColor、gradientColorStops、placeholderColor 和 textColor 启用。

手动切换深色模式

如果要支持手动切换深色模式而不是依赖于操作系统首选项，请使用 class 策略代替 media 策略：

// tailwind.config.js
module.exports = {
   
  darkMode: 'class',
  // ...
}

现在，dark:{class} 类将不再根据 prefers-color-scheme 起作用，而是当在 HTML 树中出现 dark 类时起作用。

<!-- 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>

如何将 dark 类添加到 html 元素中取决于您，但是一种常见的方式是使用 JS 从某个地方（如 localStorage）读取首选项并相应的更新 DOM。

这是一个简单的示例，说明如何支持浅色模式、深色模式，以及如何遵守操作系统的首选项。

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
   
  document.querySelector('html').classList.add('dark')
} else {
   
  document.querySelector('html').classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')