CSS框架之Tailwind CSS使用说明

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

什么是Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

---

如何安装Tailwind CSS

对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。 通过 npm 安装 Tailwind

npm install tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，我们建议您安装 autoprefixer 去处理这个问题，就像上面的代码片段所展示的那样。

如果您将 Tailwind 与依赖于旧版本 PostCSS 的工具集成在一起，则可能会看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，您应该安装 PostCSS 7 兼容性版本。

---

Tailwind CSS特点

• 功能类优先：在一组受约束的原始功能类的基础上构建复杂的组件。传统情况下，当您需要在网页上设置样式时，都需要编写 CSS。使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。

• 响应式设计：使用响应式功能变体构建自适应的用户界面。Tailwind 中的每个功能类都可以有条件的应用于不同的断点，这使得您可以轻松的构建复杂的响应式界面而不用离开 HTML。

• 悬停、焦点和其它状态：使用功能类为处于悬停、焦点和其它状态的元素设置样式。

• 添加新的功能类：使用您的自定义功能类来扩展 Tailwind。

• 函数与指令：Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。

---

Tailwind CSS的基础样式

Preflight：一套武断的针对 Tailwind 项目预设的基础样式

基于 modern-normalize , Preflight 是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并使您的工作更轻松地符合设计系统的约束。

当您在 CSS 中包含 @tailwind base 时，Tailwind 会自动注入以下样式：

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

---

如何使用Tailwind CSS（以table表格为例）

表格边框：用于控制表格边框是否应该折叠或分开的功能类。

Class	Properties
border-collapse	border-collapse: collapse;
border-separate	border-collapse: separate;

Collapse

在可能的情况下，使用 border-collapse 将相邻的单元格边框合并为一个边框。注意，这包括折叠顶层 <table> 标签上的边框。

<table class="border-collapse border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>

Separate

使用 border-separate 强制每个单元格显示自己的独立边框。

<table class="border-separate border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>