T

TailwindCSS 和 Vue - 天作之合

2025-06-04

TailwindCSS 和 Vue - 天作之合

在 Bootstrap、Foundation 和 Bulma 等 CSS 框架盛行的年代,组件始终占据着主导地位。这些框架会提供模态框、表格、选项卡、导航菜单、下拉菜单,以及结构化的布局系统和偶尔出现的辅助类。这些模式非常有效,因为它允许开发人员在<div class="modal">Modal content</div>需要的地方轻松使用。虽然偶尔会出现样式覆盖或与框架布局冲突的问题,但这个系统对许多人来说都非常有用。

多年来,Web 开发不断发展,组件驱动开发也日益流行。Vue、React 甚至 ASP.NET Core 等前后端 Web 技术都已采用并推广了模块化组件的理念。在 Web 开发中,关注点分离和单一职责的理念已从单一技术(CSS、HTML 或 JS)转向单一组件。

进入实用优先的 CSS 框架

实用优先的框架并非新鲜事物。Tachyons 于 2014 年底问世,并获得了一批狂热追随者。但这并不意味着它没有遭到批评。许多人抱怨其实用优先的风格,称其为 HTML 中的脏 CSS,并反对其简洁的类名。Tachyons 很可能在错误的时间出现在了错误的地方。

TailwindCSS 于 2017 年 7 月由 Adam Wathan 和 Jonathan Reinink 创建,Steve Schoger 参与了设计。Tailwind 迅速蹿红,赢得了开发者的青睐,并超越 Tachyons,成为首选的实用优先 CSS 框架。

Tailwind 拥有精美的设计系统、易于记忆的类名,并与底层 CSS 紧密映射。如果您还没有尝试过 Tailwind,不妨尝试一下,看看您是否喜欢它带来的小巧体积,同时又能让您体验到强大的功能。现在就来试试吧……

为什么是现在?

实用优先 CSS 最大的缺点之一就是重复的 CSS 类太多了。我们来看一个非常简单的按钮示例。

    <button
      type="button"
      class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded tracking-wider">
      Click me!
    </button>
Enter fullscreen mode Exit fullscreen mode

我能听到你在想:“搞什么鬼?!我每次用按钮的时候都得输入那么多 class 吧。” 我一点也不怪你。没人愿意输入那么多繁琐的 CSS class,实在太多了。每次你想修改网站上的按钮,你都需要找到每个按钮的实例。然后,再修改所有按钮上需要调整的 class。

Tailwind 确实提供了一种通过@apply指令在构建时对这些类进行分组的方法。因此,你创建按钮时需要将多个类重命名即可。.btn

.btn {
  @apply bg-blue-600 text-white font-bold py-2 px-4 rounded tracking-wider;
}

.btn:hover {
  @apply hover:bg-blue-700
}
Enter fullscreen mode Exit fullscreen mode

这样更好,它让我们能够引用按钮,并且如果需要修改 CSS,我们可以在一个单一、集中的位置更新。这比搜索一大堆不同的按钮好多了。

按钮仅仅是按钮吗?

按钮很少仅仅是一个按钮,卡片也很少仅仅是一个卡片。总是需要进行一些自定义,无论是加载状态、错误状态、自定义错误消息,还是大量的图标,甚至发送给父级。按钮绝不仅仅是一个按钮。

为什么不利用现代开发的力量并在 Vue.js 组件中@apply创建一个组件呢?<custom-button>

在 HTML 中,我们可以直接在按钮类上定义静态类。但对于任何基于 prop 或某种动态属性的内容,我们将使用计算属性,在本例中为 。computedClasses我们还引入了一个可选的图标插槽,使用slot语法。

<template>
  <button
    type="button"
    class="text-white font-bold py-2 px-4 rounded tracking-wider my-1"
    :class="computedClasses">
    <span class="whitespace-no-wrap">
      {{value}}
      <slot name="icon"></slot>
    </span>
  </button>
</template>
Enter fullscreen mode Exit fullscreen mode

在我们的 js 中,我们设置了一些 props 来提供给我们的自定义按钮的消费者。Valueerrorloading是示例,但可能还有许多其他可能性,例如尺寸限制、颜色、轮廓或填充。

接下来,我们设置一个计算属性,如果按钮根据 prop 值处于错误状态,则将背景更改为红色。

<script>
export default {
  props: ["value", "error", "loading"],
  computed: {
    computedClasses() {
      return {
        "bg-red-600 hover:bg-red-700": this.error,
        "bg-blue-600 hover:bg-blue-700 ": !this.error
      };
    }
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode

有了该<custom-button>文件,我们就可以从应用程序的任何其他地方调用该按钮。

    <custom-button value="Hello, world!">
      <template #icon>😊</template>
    </custom-button>

    <custom-button value="Hello, world!" :error="true">
      <template #icon>😢</template>
    </custom-button>
Enter fullscreen mode Exit fullscreen mode

我们充分利用了使用实用优先 CSS 库的所有优势,同时又能将 Tailwind 类完美地封装在一个组件中。这种模式非常实用,它允许您创建高度可定制的组件,以满足您的需求,而无需依赖 CSS 框架的开发者。HTML、CSS 和 JS 现在都集成在一个组件中,并且只负责一个功能:按钮。

您可以在drewtown.dev上找到这篇文章以及更多类似的文章,包括更多 Tailwind 和 Vue 文章

文章来源:https://dev.to/drewtownchi/tailwindcss-and-vue-a-match-made-in-heaven-34l0
PREV
React 中的 GraphQL
NEXT
在 Angular 项目中使用 ESLint 和 Prettier 与 VScode 🚀(已过时)