前言:

tailwind可以理解为一个css库，编写方式很另类，但是如果时间长了可能会变成真香系列（也能可能变成真。。。。），注：以下阐述都是个人理解以及网上寻找的资料

什么是Tailwind CSS:

Tailwind CSS是一种实用工具- 基于低级别的CSS框架，旨在简化建设有速度，较少关注Web应用程序编写自定义的CSS,

官话：Rapidly build modern websites without ever leaving your HTML.（无需离开 HTML 即可快速构建现代网站。）

tailwindcss 是一个非常富有争议的库，喜欢它的人和讨厌它的人都非常多。

不做对比！直接上干货，整！

今天给大家带来的版本 tailwindcss 版本是：3.0.23

上才艺!!!

启动项目,我们可以在 src/App.vue 中为 img 标签增加一个 class="bg-red-900"

<img class="bg-red-900" alt="Vue logo " src="./assets/logo.png" />

查看项目 img 标签背景变为红色，则表示成功

image

这个时候我们定位这个元素

image

这种在HTML中编写样式的感觉很奇妙,而这样的一种方式就是 tailwindcss 的核心理念

tailwind 官方介绍为 无需离开HTML即可快速构建现代网站 ，那么这句话怎么解读呢？具体来说就是 ： tailwind 提供了很多的 具体类名 ，每一个类名背后都代表着 一段 css 的内容。之前我们需要 template 中完成 html，style 中完成 css 。那么在现在我们就可以把 css 变成 对应的类名 直接添加到 html 的 class 中。所以我们就不需要再去切换到 style 区域，直接在 html 区域来完成对应的样式了

不能说知己知彼，但是至少要了解个大概，这种语法、或者类名多少有点难搞怎么办，别担心tailwind给用户罗列出了对应API文档 语法文档 ，而且VScode 有一个很好的插件 "Tailwind CSS IntelliSense"

image

有了这个插件，我们就再也不用担心写错的问题了，在我们写对应元素的时候右侧会给我们很好的提示，

image

tailwindcss 设计理念和价值体现

1，它的设计理念

2，它的价值体现

设计理念

tailwindcss 中一个非常核心的内容就是： 每一个类名都代表了一个 css 属性 ，这个样式在 tailwindcss 中被称作为 原子化 CSS

那么想要搞明白这样的一种设计理念，那么我们需要先搞清楚 CSS 设计史上的一些粒度划分。

整个前端历史中，CSS 颗粒度设计主要可以分为 4 种形式（ 颗粒度自上而下逐渐增大，颗粒度越大则约束性越高，可定制性越弱 ）：

1，行内样式：样式全部写入行内。自由度最高，可定制化最强。但是不方便样式的复用，每次都要写完整的样式。

<div style="background-color: #ffffff; color: #333333;"> 我是一个div</div>

2，原子化 CSS：每一个类名都代表了一个 css 属性。自由度依然很强，可定制化依然很高，也方便复用。但是大量的样式会造成大量的类名。

<div class="bg-white text-zinc-800">我是一个div</div>

3，传统形式：通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强，语义化强，自由度和可定制化性一般（比如 cart 就标记好了当前为一个卡片，通常边框、弧度、阴影、padding 也都一并规定好了）。但是大量的 html 需要取大量的语义化 class ，并且在 html 和 css 中需要来回的切换、查找。

<div class="container-box desc-container cart">我是一个div</div>

4，组件形式：在 组件库 中极为常见。封装性极强（不光封装了样式，也封装了功能），语义化强。但是自由度和可定制化性比较差。

<m-cart>我是一个div</m-cart>

那么根据我们刚才所说，这四种形式的样式处理方式其实 各有优劣。

而 tailwindcss 的核心设计理念就是：第二个：原子化的 CSS 。那么根据我们刚才的分析，这种方式惟一的问题就是：大量的样式会造成大量的类名 这样的情况。而这样的一个问题在她的 高自由度、高定制化、高可复用 的优势之下，也就变得没有那么重要了。

价值体现

想要明确 tailwindcss 的价值，那么我们需要先来明确一下 现代的前端应用 开发的一些问题。

我们以传统的后台项目的项目为例。如项目中使用了 element-plus作为 UI 组件库 。当我们决定使用 element-plus 的那一刻起，就决定了 整体的项目样式为 element 设计风格。 如果此时我们想要把项目做出个性化的风格出来，那么 ”几乎是不可能的“。

不过好在 后台 系统，风格本就千篇一律，这样设计倒也没有问题。但是如果是 前台 系统呢？

前台系统讲究 高定制化、高个性化、高交互性 ，在这样的一个要求下，element、antd、vant 这样的组件库是否还能够满足我们需求呢？ 我想答案是肯定的

演示！~

PC

image

H5

image

结语：

讲了这些我想大家对tailwind已经有一个了解，其实我只是介绍了tailwind功能的冰山一角，他比较强大的功能比如在 tailwind.config.js 文件中进行全局配置，以及样式不同尺寸的统一管理、主字号的统一配置等等都还没有呈现给大家，有兴趣的小伙伴可以有时间看看，结尾附上搭建过程！

tailwind搭建过程

1，在我们的项目中执行 npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2 ，安装 tailwindcss

2，执行 npx tailwindcss init -p 创建 tailwind.config.js 文件，该文件为 tailwindcss 的配置文件，该文件默认内容为：

image

3，接下来我们需要添加模板路径（tailwind 的应用范围）

4，在 tailwind.config.js 文件中的 content 选项下，写入如下内容：

module.exports = {

// Tailwind 应用范围

content: ['./index.html', './src/*/.{vue,js}'],

...

}

5，接下来我们需要添加一些 tailwind 的指令

6，创建 src/styles/index.scss 文件，并写入如下代码：

// 导入 tailwind 的基础指令组件

@tailwind base;

@tailwind components;

@tailwind utilities;

7，然后在 src/main.js 中引入该 index.scss

8，因为我们使用了 scss ，所以需要安装 sass ，执行 npm i -D sass@1.45.0 安装 sass

9，此时 tailwind 已经安装到我们的项目中

几个亮眼的地方

首先是响应式设计。

css的媒体查询写起来还是比较麻烦的，如下：

@media only screen and (max-width: 760px) {
    .navbar {
        width:100%;
    }
}

使用了Tailwind CSS就免去这些繁琐的东西。默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。

这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。

image.png

如下一段代码就可以实现不同尺寸显示不同样式，是不是比媒体查询写法方便很多呢！

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

当然了，媒体尺寸断点也是可以自定义的。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

第二方面是Postcss运用

Tailwind CSS结合了 postcss，将基础的 css 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性更好。例如：border: 1px solid #eee;拆分为：border-width、border-style、border-color

而且还支持根据自己设计稿定义契合自己项目的 csss 原子，这点真的很棒。

第一，如果不是为了快捷开发，恐怕不会有太多人完全满意传统 CSS 框架的样式设计。 第二，传统 CSS 框架通过“覆盖”进行定制。一般来讲，健康的做法是覆盖框架提供的变量，但是定制能力很有限。脏一点的做法就是手写 CSS 覆盖框架原生样式，但是原生样式之复杂（各种父级的不同情况，伪类的不同情况），哪怕一个小的组件，你也无法面面俱到。并且你最好得看源码。

第三方面是可维护性问题

就拿我们实现一个按钮效果来说，使用utilities class实现的话如下：

<!-- Using utilities -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

如果说有比较常用的，这里还能使用@apply指令围绕通用实用程序模式创建抽象，可以轻松解决此问题。

<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
  Button
</button>

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

这样维护起来也比较方便，相比bootstrap等这些框架，显得更加灵活，可操作性更强。