在Vue中使用tailwindcss

tailwindcss

一个很好的一个css插件，这里注意一定要按照这个
版本！不然会提示报错

---

第1步：创建Vue

vue create tailwind

---

第2步：进入根目录

cd tailwind

---

第3步：安装tailwind

cnpm i [email protected] -S

---

第4步：安装配置文件

会生成一个tailwind.config.js
npx tailwind init --full

---

第5步：创建postcss.config.js

和第四步的tailwind.config.js同级

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],
 
    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[\w-/:]+(?

---

第6步：创建CSS文件

在assets里面创建一个任意css：比如tailwind.css
然后粘贴内容

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

@import url("xxxxxxx")
//转换字体

.sb{
@apply w-10 h-10;
}
//类似于css自定义存储

---

第7步：全局引入

在mail中全局引入
import "./assets/tailwind.css"

---

第8步：开始启动

cnpm run serve

---

测试是否成功

大功告成！