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;

image.png

image.png

创建您的Tailwind配置文件

npx tailwindcss init

image.png

可以看见此时我们tailwind.config.js和postcss.config.js
tailwind.config.js不用动,里面放的是我们基本的样式,需要配置是postcss.config.js
image.png

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]
    : []
  ]
}

image.png

验证结果

安装、配置完成之后,我们重启项目,验证一下

npm run dev

任意页面位置写入这段代码,查看效果

<p class="text-purple-700 text-opacity-100">The quick brown fox</p>

效果
image.png
证明你成功了,恭喜你!

小编不易,如有收获,微信赏小编喝杯娃哈哈
image.png

单身狗的 葵花宝典,撩妹必备 敬请关注!
image.png

阅读 415

推荐阅读