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>

我能听到你在想：“搞什么鬼？！我每次用按钮的时候都得输入那么多 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
}

这样更好，它让我们能够引用按钮，并且如果需要修改 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>

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

接下来，我们设置一个计算属性，如果按钮根据 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>

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

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

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

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

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