前言

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

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