VueCLI3+项目使用tailwindcss 详细步骤流程

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>

效果

证明你成功了，恭喜你！

小编不易，如有收获，微信赏小编喝杯娃哈哈

单身狗的 葵花宝典，撩妹必备 敬请关注！