TailwindCSS 带来一见钟情

2025-06-09

TailwindCSS 带来一见钟情

想象一下我第一次看到 TailwindCSS 框架时的想法，我脑子里已经把它当成了 Bootstrap、Bulma、Foundation 等我之前尝试过的常见框架之一，以至于我一时之间就把目光从它身上移开了。直到最近，在看到 v1 版本发布后，我才决定重新审视它，而令我惊讶的是，我竟然爱上了 TailwindCSS。在本文中，我将通过一些实用的示例，向您介绍 TailwindCSS，以及为什么我认为它完全不同。让我们开始吧，好吗？

顺风

介绍

TailwindCSS是一个实用型 CSS 框架，用于构建自定义用户界面设计。它是一个高度可定制的底层 CSS 框架，为您提供构建定制设计所需的所有构建块，无需费力覆盖任何烦人的固有样式。

为什么选择 TailwindCSS？

我认为我爱上 TailwindCSS 的一个常见原因是我发现我可以实现以下功能：

  • 即时定制： Tailwind 可轻松定制以满足您的需求。您可以自定义颜色、边框大小、阴影、间距等等。TailwindCSS 的定制功能完全由您决定。
  • 组件友好： TailwindCSS 也是一个组件友好的 CSS 框架，这意味着您不必为 UI 使用重复的实用程序类，而是可以组合常用模式并将其抽象为最终可重用的组件类。
  • 响应核心： TailwindCSS 捆绑了适用于不同屏幕尺寸的响应式变体，只需在类前加上屏幕尺寸前缀即可在您的 UI 中采用这些变体。

入门

要在您的项目中开始使用 TailwindCSS，您需要将其安装为依赖项，或者将其用作 CDN。但请注意，我们不推荐使用 CDN 选项，因为这样一来，一些让 Tailwind 如此出色的功能将无法使用。

// using CDN
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode 
# using npm
npm install tailwindcss -save-dev or 

# using yarn
yarn add tailwindcss --dev
Enter fullscreen mode Exit fullscreen mode

安装完成后，我们需要使用@tailwind指令将 Tailwind 的样式注入到我们的 CSS 中。接下来，让我们将 Tailwind 的基础样式、组件样式和实用样式添加到我们的 CSS 中。styles.css

@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

随着最近发布的v1.0，好消息是我们不再需要创建tailwind.config.js文件，因为这现在是可选的。

使用 TailwindCSS CLI

现在，我们可以使用 tailwind 的 CLI，使用以下命令将我们的 CSS 构建到 tailwind 的样式中。

npx tailwind build style.css -o output.css
Enter fullscreen mode Exit fullscreen mode

tailwind 命令只是将我们的默认 CSS 文件style.css作为输入，并将样式处理output.css为输出文件。

现在，您可以使用它来确保将顺风样式应用于我们的 HTML 内容，而不是将其用作style.cssHTML 中的样式表。output.css

  <link rel="stylesheet" type="text/css" href="output.css">
Enter fullscreen mode Exit fullscreen mode

现在让我们开始创建一些示例，探索 TailwindCSS 的功能。您也可以在 Codepen 上启动 TailwindCSS，也可以在本地计算机上运行，​​选择您喜欢的方式即可。我将在本文中分享一些 Codepen 示例以及代码示例。

示例 1：创建卡片

让我们使用 TailwindCSS 创建一张卡片，看看这个过程是多么无缝，无需编写任何 CSS 行。

<div class="mx-auto my-3 max-w-md rounded overflow-hidden shadow-lg">
  <img src="https://images.unsplash.com/photo-1557310717-d6bea9f36682?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=400&w=634&q=80" class="w-full" alt="a platter of cookies">
 <div class="px-6 py-4">
  <div class="font-bold text-xl mb-2">Chocolate Chip Cookies</div>
  <p class="text-base text-gray-700">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
  </p>
 </div>
 <div class="px-6 py-4">
  <span class="inline-block bg-gray-300 px-3 py-2 text-sm font-semibold mr-2 text-gray-700 rounded-full">
   #photography
  </span>
   <span class="inline-block bg-gray-300 px-3 py-2 text-sm font-semibold mr-2 text-gray-700 rounded-full">
   #food
  </span>
   <span class="inline-block bg-gray-300 px-3 py-2 text-sm font-semibold text-gray-700 rounded-full">
   #cookies
  </span>
 </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

卡片
这是卡片示例的 codepen 链接。

示例 2：自定义按钮

我们将要看的第二个例子是如何使用 TailwindCSS 创建按钮。

<button class="bg-blue-400 text-white font-bold py-2 px-5 rounded my-2">Button</button>
<button class="bg-red-600 text-white font-bold py-2 px-5 rounded my-2">Button</button>
<button class="bg-gray-600 text-white font-bold py-2 px-5 rounded my-2">Button</button>
<button class="bg-green-500 text-white font-bold py-2 px-5 rounded my-2">Button</button>
Enter fullscreen mode Exit fullscreen mode

按钮

我非常喜欢使用文档来创建这些示例，您还可以利用的一件事是将实用程序类提取为组件。

将实用程序类提取为组件

您还可以将实用程序类提取为组件，正如我之前提到的。Tailwind 提倡Utility-first工作流程，但当您发现重复使用相同的样式时，就应该考虑将它们提取到组件中。以下是如何实现这一点。

从上面的示例 2 中，我们可以通过使用将其提取出来作为组件来进一步减少实用程序类的数量@apply。


<button class="btn btn-blue">
  Button
</button>
<button class="btn btn-gray">
  Button
</button>


<style>
.btn {
  @apply text-white font-bold py-2 px-4 rounded my-2;
}
.btn-blue {
  @apply bg-blue-500;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
.btn-gray {
  @apply bg-gray-500;
}
.btn-gray:hover {
  @apply bg-gray-700;
}

</style>
Enter fullscreen mode Exit fullscreen mode

您仍然可以获得相同的结果，但应用的实用类数量却少得多。请注意，像hover:、focus:,和这样的变体{screen}:不能直接应用，因此请将实用程序的普通版本应用于相应的伪选择器或媒体查询。

我非常享受探索 TailwindCSS 的过程，迫不及待地想在我的项目中使用它。你尝试过 TailwindCSS 吗？或者在项目中使用过它吗？你对它有什么看法？欢迎留言评论。

鏂囩珷鏉ユ簮锛�https://dev.to/lauragift21/love-at-second-sight-with-tailwindcss-23dc
Devto 翻译
PREV
什么是 JAMstack 以及为什么你应该尝试它
NEXT
我穿越空间、时间和科技的旅程（迄今为止）。