在vue中使用Tailwind CSS

-----------------------------------------------11.26---------------------------------------------
如今的网页的性能问题会很大程度地影响你的产品质量，已经从产品发布才开始解决的问题变成开发阶段就需要关注的问题，因为这大大关系了用户体验。

• 根据这个报告显示，平均每个用户打开网页是希望能在4秒内加载出来，超过40%的用户在加载超过3秒后会选择关闭该页面。

什么是打包大小？

在理解什么是打包大小之前，我们应该先了解什么是打包

打包就是各种打包工具（比如webpack,parcel,snowpack）将所有不同的资源文件HTML文件，CSS文件，Javascript文件，图片文件整合起来并产生一个更小的文件的过程。打包是减少HTTP请求并展示服务器内容给用户的必要过程。

打包大小就是最后产生的打包文件的大小，而这个大小恰恰影响着网页的加载速度。

这篇文章，我们会演示如何减少我们使用Tailwind CSS开发的网页的打包大小。我们还会学习如何使用PurgeCSS，并且如何在Vue中实现。

什么是Tailwind CSS?

这是一个用于设计网页的CSS库，相比其他库，没有提供任何预置的组件，只会提供给你一套CSS工具类添加到你的组件来设计样式

什么是PurgeCSS？

用于移除项目没有用到的样式，是专门用于优化Tailwind CSS打包大小的开发工具

安装并创建Vue的Tailwind项目

如果你已经安装Vue CLI脚手架，你可以通过vue create创建项目

首先运行命令：

vue create vue-tailwind

根据需要选择你需要的配置，然后进入项目目录：

cd vue-tailwind

运行项目：

yarn serve
or
npm run serve

然后你的项目就会运行在http://localhost:8080/上

安装依赖：

npm install tailwindcss postcss autoprefixer

然后在根目录下创建一个postcss.config.js，使用tailwindcss和autoprefixer插件

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

因为这篇文章介绍的是“如何在Vue中使用Tailwind CSS”，所以只介绍最简单的方式，直接在main.js入口文件中import即可：

import "tailwindcss/tailwind.css"

这时候再运行项目，如果报以下这个错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

说明你下载了新版的tailwind,需要PostCSS 8支持，但即便你下载了PostCSS 8，你的项目框架可能也因为版本较老不支持PostCSS 8，需要卸载后重新安装兼容版本

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

这时候再运行项目估计就可以了

然后根据Tailwind官方文档给template随便加上你想要的样式

最后对项目进行打包：

yarn build

可以看到打包后的文件大小相当大，这还只是包含了默认基础样式的情况下

使用PurgeCSS压缩文件大小

为项目创建Tailwind的配置文件，用于自定义Tailwind配置

npx tailwindcss init

上面这行命令在项目根目录下创建了tailwind.config.js文件，文件中包含所有Tailwind的默认配置

在tailwind.config.js下进行以下配置：

purge: {
  enabled: true,
  content: [
     './src/**/*.vue',
    './public/**/*.html',
  ]
},

PurgeCSS会根据配置下的指定目录清理没有使用到的样式

执行以下命令进行最后的打包：

yarn style && yarn build

可以看到打包后文件小了很多