Vue/Cli4 引用 tailwindcss

前言

TailWindCss 是我写前端很喜欢的一个css样式模块

本人按照官网的教程没成功过.所以自己特意来写一篇关于TailwindCss的随笔.

如果误区,请评论指出,谢谢您的支持!

准备

cnpm install tailwindcss

搞事情

1. 找到我们的Vue.config.js

   // vue.config.js
   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             require('tailwindcss'),
             require('autoprefixer')
           ]
         }
       }
     }
   }
   

2. 找到我们的main.js,导入我们的tailwindcss

   // main.js 部分代码
   // 加入这一行
   // tailwindcss/tailwind.css 不需要创建,使我们安装包后在node_moduls下自动生成的
   import 'tailwindcss/tailwind.css';
   

3. 创建tailwind.config.js

   除了运行下面的shell外,还可以自己手动创建

   npx tailwind init
   

后记

本篇随笔借鉴于VueCLI3+项目使用tailwindcss，最简单配置

但是由于无法复制,所以我这里就重新搞了一遍.谢谢这位大佬.感谢无私奉献的人.有你更精彩....