1、先看官方文档：https://www.tailwindcss.cn/
2、先安装：npm install -D tailwindcss
---------------通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。
npm install -D tailwindcss
3、初始化文件—npx tailwindcss init
npx tailwindcss init
4、创建tailwindcss文件
在 assets 文件夹下创建 tailwendcss.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;
5、在main.js中引入
import '@/assets/tailwindcss.css'
二、解决问题方案
1.使用px代替默认的rem单位
在tailwind.config.js文件中，将配置修改为以下内容
module.exports = {
purge: {
enabled: false,
content: ['./src/**/*.{js,jsx,ts,tsx}'],
},
content: [],
theme: {
spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}px`;
return map;
}, {}),
extend: {},
},
plugins: [],
};
2.vue2中由于版本问题 需要降低版本
由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3.vue2要在vue.config.js中配置
css: {
loaderOptions: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
标题然后重新运行即可—快来试试吧！
<div class="flex justify-center">flex居中</div>
<div class="container mx-auto px-4">container mx-auto px-4</div>
