Tailwind CSS是一个非常便利的CSS框架，可以大大提速对于页面样式的设置。但是在Vue 2中的使用Tailwind CSS则是因为一些版本的原因存在兼容性问题。这片文章就是来记录一下如何在Vue 2中使用Tailwind CSS的。

卸除已经安装的Tailwind CSS框架

首先需要确保项目中没有安装以下库。

• Tainwind CSS
• PostCSS
• autoprefixer

卸载可以使用以下命令。

1

npm uninstall tailwindcss postcss autoprefixer

安装Tailwind CSS框架的特定版本

因为Tailwind CSS 2.x需要PostCSS 8以上的版本，但Vue 2中所提供的是PostCSS 7，所以要使用Tailwind CSS就必须安装特定的版本。

现在，执行以下命令安装所需要的库。

1

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

配置Tailwind CSS框架

要使用Tailwind CSS，首先需要建立一个PostCSS的配置。在项目的根目录下建立一个名为postcss.config.js的文件，并在其中写入以下内容。

1
2
3
4
5
6
7
8
9

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ]
};

之后在项目的src/assets/css目录中创建一个名为tailwind.css的文件，这个文件中写入以下内容。

1
2
3

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

最后在src/main.js中引入这个样式文件即可。

如果需要自定义Tailwind CSS的设置或者主题，那么可以在项目根目录中执行npx tailwind init创建一个tailwind.config.js文件，然后只需要在其中调整Tailwind CSS所需要配置即可。