---
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所需要配置即可。