tailwindcss 官网链接 https://www.tailwindcss.cn/
tailwindcss是是一个用于快速 UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具，响应式风格可以满足不同设备上的开发。
tailwindcss安装
npm install tailwindcss
tailwindcss配置
在main.js中引入
import "./assets/tailwind.css";//引入tailwind在./assets/tailwind.css中写
@tailwind base;
@tailwind components;
@tailwind utilities;
创建您的Tailwind配置文件
npx tailwindcss init
可以看见此时我们tailwind.config.js和postcss.config.js
tailwind.config.js不用动，里面放的是我们基本的样式，需要配置是postcss.config.js
postcss.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-/:]+(?<!:)/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
验证结果
安装、配置完成之后，我们重启项目，验证一下
npm run dev任意页面位置写入这段代码，查看效果
<p class="text-purple-700 text-opacity-100">The quick brown fox</p>效果
证明你成功了，恭喜你！
小编不易，如有收获，微信赏小编喝杯娃哈哈
单身狗的 葵花宝典，撩妹必备 敬请关注！
