CSS的编写一直是前端程序员比较头疼的事情，在项目中一般会花上大量的时间进行CSS样式编写，当然，如果是开发后台管理系统或者表单填写可能并不会编写太多的CSS样式，而如果要开发一个主页则需要考虑到响应式，自适应，兼容性等一系列让人头疼的问题。

所以这个时候Tailwind就出现了，它是可以让你使用类名就能轻松编写CSS样式，并且它可以非常简单的实现响应式，不用再写大量的媒体查询。例如下面：

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

通过Tailwind进行响应式编写的话就可以简化成：

<img class="w-16 md:w-32 lg:w-48" src="...">

上面的代码的含义是，在各个屏幕宽度时，img标签的宽度属性也会发生变化md:就对应着@media (min-width: 768px) ，而lg:就对应着@media (min-width: 1024px)。

这就省去了大量编写媒体查询的时间。

1. 为什么要选择Tailwind？

Tailwind现在在国外受到了广泛的关注，从npm上面的下载量可以看出Tailwind的下载量在持续上升，而目前该项目在GitHub上已经拥有了30K Star，说明是一个非常值得信赖的项目。

2. 引入Tailwind

首先进行npm下载

npm install tailwindcss postcss autoprefixer

在项目的根页目录下创建文件postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

在项目的命令行中运行npx tailwindcss init生成Tailwind配置文件。

最后在src目录中创建一个tailwind.css文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

最后在该项目的main.js中引入tailwind.css文件。

这样就已经可以在项目中进行使用了。

3. 优化大小

虽然通过上面的方式引入了Tailwind，但是打包后的CSS文件是非常大的，它会把Tailwind中自带的CSS样式全部打包到你的项目文件中，所以我们还需要在tailwind.config.js文件中purge项添加下面的代码：

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

到目前为止，才算是真正的引入完成。

4. 使用

Tailwind的上手几乎是没有任何难度的，因为它提供的类就根据基础的CSS属性进行命名，比如说：

<div style="display: flex;">
    盒子
</div>

就等同于

<div class="flex">
    盒子
</div>

现在Tailwind几乎涵盖了所有的CSS属性，无论你是常用的，还是不常用的，都能在官方文档上面找到其对应的Tailwind类名。

Tailwind文档

5. 自定义

虽然Tailwind定义了很多长度，但是偶尔不符合你的要求，这个时候你就可以进行自定义，而配置项只需要按照文档在tailwind.config.js中进行新增。

推荐使用Tailwind的还有一点原因就是，它的官方文档写的非常的详细，虽然是使用的英文，但是知道大概意思，并且使用翻译软件，阅读起来也没有什么障碍。

6. 最后

因为Tailwind的官方文档介绍的实在是太详细了，这里只是做一个抛砖引玉的作用，虽然写上一大堆Class可能有点反人类，但是对于项目维护时，需要去修改某一个样式就不用再进行“上下横跳”，直接在当前行进行修改类名就可以了。

总的来说，Tailwind绝对推荐使用，它大大简化了编写CSS的时间，再配合上less或者sass，开发体验会变得截然不同，毕竟前端程序员喜欢写CSS人还不是那么多，不然Tailwind的关注度也不会持续上升！