如果你看过好多教程之后,还是报错,无法使用tailwindcss,我希望本教程可以让你成功上岸。
环境要求
- node:>=v14.17.0
安装tailwindcss
由于最新的tailwind css使用post css 8版本,vue2框架暂时还不支持,所以需要指定安装postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
安装之后检查版本:
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17"
},
"devDependencies": {
"autoprefixer": "^9.1.0",
"css-loader": "^0.28.8",
"postcss": "^7.0.39",
"postcss-loader": "^3.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
},
创建tailwindcss文件
在 assets 文件夹下创建 tailwendcss.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;
在入口文件main.js中引入
import '@/assets/tailwindcss.css'
创建tailwindcss的配置文件
# 创建一个空的tainwind css配置文件
npx tailwindcss init
此时会生成一个 tailwindcss.config.js
文件,文件内容根据自己项目来定,需要自己添加purge
,大致如下
/** @type {import('tailwindcss').Config} */
module.exports = {
//文件路径根据自己项目来定,可能是 ./src/**/*.{js,ts,jsx,tsx}
purge: [ "./app/**/*.{js,jsx,vue}", "./app/index.html" ],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {}
},
variants: {},
plugins: []
};
配置postcss(关键步骤)三种方式根据不同项目
一、如果你的项目使用的是vue-cli创建的,请修改vue.config.js
文件:
//vue.config.js
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
}
二、如果你的项目直接使用的是webpack,请修改webpack.config.js
(名字不一定,也可能是其他webpcak的配置文件名):
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: loader => [
require('tailwindcss'),//这里是关键点
require('autoprefixer'),
require('cssnano'),
],
},
},
'sass-loader',
],
},
]
}
三、如果你的项目配置文件vue.config.js
或webpack.config.js
没有配置postcss,下面这种方式才能生效
项目根目录下的 postcss.config.js
文件,将 tailwindcss
和 autoprefixer
添加到你的 PostCSS 配置中。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
在项目中愉快的用起来吧
<div class="flex justify-center">flex居中</div>
注意
一般会在配置postcss这一步时遇到问题,亲身踩坑,一定要注意看这一步怎么配置的。如果你的项目还是有问题可以留言,我们一起解决。