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 文章
文章来源:https://dev.to/drewtownchi/tailwindcss-and-vue-a-match-made-in-heaven-34l0