guide/tailwind-css-dark-mode

Tailwind CSS 暗黑模式指南

Tailwind CSS 提供了一种简单的方法来快速实现暗黑模式，让您的网站或应用程序在夜间使用时更加舒适。以下是如何在 Tailwind CSS 中实现暗黑模式的步骤。

1. 安装 Tailwind CSS

首先，确保您已经安装了 Tailwind CSS。您可以通过以下命令来安装：

npm install tailwindcss postcss autoprefixer

或者使用 yarn：

yarn add tailwindcss postcss autoprefixer

2. 配置 Tailwind CSS

在您的项目中创建一个 tailwind.config.js 文件，并添加以下内容：

module.exports = {
  purge: [],
  darkMode: 'class', // 或者 'media' 或 'javascript'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. 使用暗黑模式类

在您的 HTML 文件中，您可以使用 dark 类来启用暗黑模式：

<div class="dark:bg-gray-800">这里是暗黑模式的内容</div>

4. 主题变量

Tailwind CSS 允许您自定义主题变量，以便在暗黑模式下更改颜色：

module.exports = {
  theme: {
    extend: {
      colors: {
        'dark-background': '#333',
        'dark-text': '#fff',
      },
    },
  },
}

然后，在您的 HTML 中使用这些变量：

<div class="bg-dark-background text-dark-text">这里是自定义颜色的暗黑模式内容</div>

5. 响应式设计

Tailwind CSS 支持响应式设计，您可以使用 dark: 变体来为暗黑模式添加不同的样式：

<div class="bg-gray-100 dark:bg-gray-800">这是响应式暗黑模式的内容</div>

扩展阅读

如果您想了解更多关于 Tailwind CSS 的信息，请访问我们的 Tailwind CSS 官方文档。

Dark Mode Illustration