68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
---
|
||
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所需要配置即可。
|