前言:

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 标签背景变为红色，则表示成功

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

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

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

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

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

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 这样的组件库是否还能够满足我们需求呢？我想答案是肯定的

演示！~

结语：

讲了这些我想大家对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 的配置文件，该文件默认内容为：

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 已经安装到我们的项目中

tailwindcss 初体验