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，最簡單配置

但是由於無法復制,所以我這里就重新搞了一遍.謝謝這位大佬.感謝無私奉獻的人.有你更精彩....