post:增加在vue中使用Tailwind的文章。

source/_posts/tailwind-in-vue2.md

@@ -0,0 +1,67 @@
+---
+title: 在Vue 2中使用Tailwind CSS
+tags:
+  - 前端
+  - Vue
+  - Tailwind CSS
+  - CSS
+categories:
+  - - 前端
+    - Vue
+keywords: 'Vue,Tailwind'
+date: 2021-08-24 14:10:46
+---
+
+Tailwind CSS是一个非常便利的CSS框架，可以大大提速对于页面样式的设置。但是在Vue 2中的使用Tailwind CSS则是因为一些版本的原因存在兼容性问题。这片文章就是来记录一下如何在Vue 2中使用Tailwind CSS的。<!-- more -->
+
+## 卸除已经安装的Tailwind CSS框架
+
+首先需要确保项目中没有安装以下库。
+
+- Tainwind CSS
+- PostCSS
+- autoprefixer
+
+卸载可以使用以下命令。
+
+```bash
+npm uninstall tailwindcss postcss autoprefixer
+```
+
+## 安装Tailwind CSS框架的特定版本
+
+因为Tailwind CSS 2.x需要PostCSS 8以上的版本，但Vue 2中所提供的是PostCSS 7，所以要使用Tailwind CSS就必须安装特定的版本。
+
+现在，执行以下命令安装所需要的库。
+
+```bash
+npm install --save-dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
+```
+
+## 配置Tailwind CSS框架
+
+要使用Tailwind CSS，首先需要建立一个PostCSS的配置。在项目的根目录下建立一个名为`postcss.config.js`的文件，并在其中写入以下内容。
+
+```js
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+  plugins: [
+    tailwindcss,
+    autoprefixer,
+  ]
+};
+```
+
+之后在项目的`src/assets/css`目录中创建一个名为`tailwind.css`的文件，这个文件中写入以下内容。
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+最后在`src/main.js`中引入这个样式文件即可。
+
+如果需要自定义Tailwind CSS的设置或者主题，那么可以在项目根目录中执行`npx tailwind init`创建一个`tailwind.config.js`文件，然后只需要在其中调整Tailwind CSS所需要配置即可。