什么是 Tailwind CSS？为什么要使用它？

原文发表于soumya.dev

Tailwind CSS 是一个实用性优先的 CSS 框架，这意味着它具有各种实用类，可以帮助创建布局并快速创建自定义设计。

我一直很喜欢 Adam（Tailwind CSS 的创始人）的直播，他用 Tailwind CSS 创建出美观且设计精良的布局。现在，我无法想象未来的项目不用 Tailwind CSS 会是什么样子。

我的博客也是用 Tailwind CSS 搭建的。😉

它与 Bootstrap 或 Bulma 等框架有何不同？🤔

大多数 UI 框架，例如 Bootstrap、Material UI、Bulma 等，都预先设计了卡片、按钮、导航栏、提示框等 UI 组件。您可以使用这些组件，并在此基础上创建设计。

但在 Tailwind CSS 中，你没有预先设计好的组件集，只有实用类。你可以组合这些实用类来创建布局和组件。

与其他框架相比，这种框架有哪些优势？

1. 如果你使用其他框架，比如 Bootstrap，你的网站就会显得很像 Bootstrap 的风格。这意味着人们很容易看出它是用 Bootstrap 构建的（这当然不是问题），但它看起来与成千上万个使用相同框架构建的网站非常相似。Tailwind CSS则不存在这个问题，因为它没有提供预定义的组件。你可以任意组合使用 Tailwind 的实用类来创建自己的 UI 组件。具体操作方法请参见下文。
2. 要解决上述问题，只有一个办法：覆盖样式。如果您以前这样做过，就会知道这很快就会变得难以控制。但 Tailwind CSS 不存在这个问题。
3. 你解决了计算机科学中最难的两件事之一：命名，这里指的是创建类名。正如之前提到的，Tailwind CSS 提供了实用类，你可以用它们来创建样式，而无需担心类名的创建。
4. 响应式设计：如果您使用 Tailwind CSS，则无需编写自定义样式来处理不同屏幕尺寸的响应式布局。您可以使用 Tailwind 的响应式实用程序轻松实现这一点。我们将在下文中详细介绍。

5. 伪类：我们可以像在 Tailwind CSS 中进行响应式设计一样，在鼠标悬停、聚焦等情况下设置元素样式。

6. 还有更多精彩内容！ ——我们一直在添加新功能，例如深色模式支持、动画效果等等。

Tailwind CSS 入门

使用 Tailwind CSS 最简单的方法是下载 CDN 并开始试用。对于大型项目，我建议通过 npm 安装，具体方法我在 CDN 安装方法下方有详细介绍。

使用 CDN：

将 CDN 添加到您的 HTML 代码中：

<link
  href="<https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css>"
  rel="stylesheet"
/>

通过 npm 安装：

1. 要使用它，您必须先通过 npm 安装 Tailwind CSS。
   

   npm install tailwindcss -D
   # -D installs it as a dev dependency
   

2. 创建 Tailwind 配置文件：此文件用于根据您的喜好配置和自定义 Tailwind。
   

   npx tailwindcss init
   

   这将tailwind.config.js在项目根目录中创建。
   

   // tailwind.config.js
   module.exports = {
     future: {},
     purge: [],
     theme: {
       extend: {},
     },
     variants: {},
     plugins: [],
   };
   

3. 将 Tailwind CSS 添加到您的 CSS 中：创建一个包含以下内容的 CSS 文件并导入它。
   

   @tailwind base;
   
   @tailwind components;
   
   @tailwind utilities;
   

4. 将 Tailwind 与 PostCSS 结合使用：Tailwind CSS 是一个 PostCSS 插件，这意味着您需要postcss.config.js在项目根目录创建一个文件：
   

   module.exports = {
     plugins: [
       // ...
       require("tailwindcss"),
       require("autoprefixer"),
       // ...
     ],
   };
   

   在生产环境中，为了减小 CSS 文件的大小，建议清除未使用的 CSS。您可以在这里找到更多信息。

使用 Tailwind CSS

如前所述，Tailwind CSS 为我们提供了实用类。

例如，要给元素添加display: flex属性，我们只需将flex类名添加到元素上即可。很简单，对吧？

同样，还有许多用于各种颜色、弹性盒、CSS 网格、间距、排版、边框样式、过渡效果等的类。

下面我展示了 Tailwind CSS 提供的一些实用类：

颜色：我们可以使用默认调色板中指定的各种颜色，例如红色、蓝色、黄色以及其他不同色调（100-900）的颜色。我们还可以通过修改文件来添加或删除调色板中的颜色taiwind.config.js。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }

边距和内边距：要使用边距，我们使用 `<margin>` 、mx-1` <margin>`、`<margin>` 分别给页面左右、上下和四周添加边距。数字 1、3 和 4 遵循Tailwind默认的间距比例。my-3m-4

响应式设计：我们可以轻松地为网站添加响应式设计。例如，假设我们希望某个段落在小屏幕上显示粗体，在大屏幕及以上显示半粗体，我们可以通过以下 HTML 代码轻松实现：

<p class="font-bold lg:font-semibold">
  Hello, I am a paragaph styled using Tailwind CSS.
</p>

提示：为了非常轻松地调试所有屏幕尺寸的响应式样式，我使用Sizzy 浏览器。

显示类：用于控制display元素的属性。例如，要使一个项目显示为可编辑状态display:block，我们给元素添加一个类block。同样，我们使用类 `<span>` flex、grid` table<span>` 等来为元素赋予相应的样式。

还有很多不同的实用程序类我没有介绍，但你可以在文档中找到它们。

让我们通过一些示例来更深入地了解 Tailwind CSS：

例如：

a. HTML：

<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>

变为：

CodePen - Tailwind CSS 示例 1

解释：

px-4并py-2分别在水平轴和垂直轴上添加边距。

font-semibold将按钮文本的字体粗细设置为 600。

bg-blue-400赋予它 Tailwind调色板中的 400 号色调的蓝色。

最后，rounded给出按钮border-radius: 0.25rem;。

b. HTML（此示例取自文档本身）：

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img
      class="rounded-lg md:w-56"
      src="https://bit.ly/34e2djy"
      alt="Woman paying for a purchase"
    />
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="text-sm font-bold tracking-wide text-indigo-600 uppercase">
      Marketing
    </div>
    <a
      href="#"
      class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"
    >
      Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
      Getting a new business off the ground is a lot of hard work. Here are five
      ideas you can use to find your first customers.
    </p>
  </div>
</div>

变为：

CodePen - Tailwind CSS 示例 2

c. HTML （我的博客上的文章列表）：

<div class="px-4 py-4 mb-3 font-normal bg-gray-300">
  <div class="flex flex-col justify-between md:flex-row">
    <h3 class="mb-2 text-2xl font-semibold leading-snug">
      Use TailwindCSS with Gatsby (with Emotion or styled-components)
    </h3>
    <div class="flex items-center mb-2 space-x-2">
      <p class="px-2 text-gray-200 bg-blue-600 rounded">#gatsby</p>
      <p class="px-2 text-gray-800 bg-teal-400 rounded">#tailwindcss</p>
      <p class="px-2 text-gray-200 bg-purple-600 rounded">#css</p>
    </div>
  </div>
  <p class="text-gray-700">
    Learn how to use TailwindCSS with Gatsby along with Emotion or
    styled-components perfectly.
  </p>
</div>

变为：

CodePen - Tailwind CSS 示例 3

提示：要快速查看 Tailwind 类，请使用TailwindCSS 速查表📝。

将 Tailwind CSS 与 React 结合使用：

在网站中为可复用组件重复编写相同的工具类会非常麻烦。为了解决这个问题，您可以将通用样式提取到一个 React 组件（或您选择的前端框架中的组件）中，使用 props 使其动态化，然后重复使用该组件。

一个简单的卡片组件示例：

用法：

<Card
  imgSrc="https://bit.ly/31lfllc"
  imgAlt="Hotel California"
  title="Welcome to Hotel California"
  pricing="$259 USD/ night"
  url="/hotel/california-hotel"
/>

卡片组件：

function Welcome({ imgSrc, imgAlt, title, pricing, url }) {
  return (
    <div>
      <img className="rounded" src={imgSrc} alt={imgAlt} />
      <div className="mt-2">
        <div>
          <div className="font-bold leading-snug text-gray-700">
            <a href={url} className="hover:underline">
              {title}
            </a>
          </div>
          <div className="mt-2 text-sm text-gray-600">{pricing}</div>
        </div>
      </div>
    </div>
  );
}

这里有一个使用 React + Tailwind CSS 的 CodeSandbox 示例，供您体验！

如果您想将 Tailwind CSS 与 Emotion 或 styled-components 等 CSS-in-JS 库一起使用，您可以参考我的指南。

我希望这些例子能让你理解 Tailwind CSS 的各种特性，以及它与 Bootstrap 等传统 CSS 框架的区别。我相信，一旦你开始在项目中使用 Tailwind CSS，你一定会像我一样爱上它。

祝您编程愉快！👨‍💻

如果这篇文章对您有所帮助，并且您想帮助我在 YouTube 上创建更多类似的教程/视频，请考虑在https://coffee.soumya.dev/上支持我。

想在邮箱里收到更多这类文章吗？请在这里订阅我的电子报和YouTube频道。