原文地址
Tailwind CSS官网。
使用 Tailwind CSS 一年后，我的一些感受
在深入学习本教程之前，请确保您已经设置了 Tailwind CSS 项目。你还应该将 Flowbite 安装为插件，以便您可以在暗模式下使用其组件。
如何安装 Tailwind CSS
使用 Tailwind CSS 最流行的方式是将其安装为 PostCSS 插件。为此，我们需要使用 NPM 安装三个不同的包：
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
之后，你应该创建一个名为postcss.config.js并在其中添加以下代码的文件：
// postcss.config.jsmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }}
现在打开你的终端并执行以下命令：
npx tailwindcss init
这将创建一个空tailwind.config.js文件，我们稍后将使用该文件将 Flowbite 作为插件包含在内。
接下来，你应该创建一个新的 CSS 文件，你可以调用它styles.css并在其中添加以下代码：
/* ./your-css-folder/styles.css */@tailwind base;@tailwind components;@tailwind utilities;
用 PostCSS 编译代码后，注入的指令（基础、组件、实用程序）将在最终 CSS 文件中作为样式使用。
最后，你需要做的就是使用 Tailwind CLI 通过运行以下命令来编译 CSS：
npx tailwindcss -o tailwind.css
一个新创建的tailwind.css文件将在你的项目中可用，你应该将其包含在 HTML 模板中以访问样式。
现在，你在计算机上本地有一个可用的 Tailwind CSS 配置。如果你想了解有关此过程的更多信息，请查看Tailwind CSS 的安装指南。
如何安装 Flowbit
我们需要安装 Flowbite 才能访问组件的全部功能和暗版支持。幸运的是，设置过程非常简单，因为它是一个 Tailwind CSS 插件。
让我们首先通过 NPM 安装它：
npm i @themesberg/flowbite
然后在文件中将其作为插件要求tailwind.config.js：
module.exports = { plugins: [ require('@themesberg/flowbite/plugin') ]}
最后，确保在标签关闭之前的某处还包含 JavaScript 文件：
<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
如何在 Tailwind CSS 中启用暗模式
首先要了解的是 Tailwind CSS 中暗模式的工作原理。你可以通过两种方式进行设置：
主要区别在于该media选项只会考虑浏览器的配色方案偏好，这实际上是由操作系统设置的。
该class选项将仅查找.dark应用于主标签的类。这是大多数网站使用的，因为通过这种方法，用户可以手动设置他们的偏好。
我们将坚持使用该class选项，因为它可以让用户更好地控制他们的主题偏好。
让我们首先将以下内容添加到tailwind.config.js文件中：
module.exports = { darkMode: 'class', // ...}
Tailwind CSS 暗模式配置
这会将 Tailwind 配置为使用class暗模式选项。
接下来，将脚本添加到页面元素。这将检查以前的用户偏好localStorage，并使用浏览器的配色方案作为备份：
<script> // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes if ( localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) ) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); }</script>
暗模式检查器 localStorage
我们将此脚本添加到标签而不是结束标签之前的原因是因为我们希望在将页面设置为深色或浅色模式时避免闪烁效果。
如何构建暗模式开关
现在已配置 Tailwind，我们需要构建用户将与之交互的元素，以将主题从暗模式更改为亮模式。
为此，我们将坚持使用Flowbite 组件库
