Vue CLI 安裝 Tailwind CSS

Vue CLI 安裝 Tailwind CSS
Vue CLI 安裝 Tailwind CSS

2020.11.20 更新:因為這幾天 Tailwind.css 升級到了 v2.x,看了一下 npm 上套件的說明也有更新。本篇大部份未變,一樣可支援安裝 Tailwind.css v2.x,不一樣的是,tailwind.config.js 新增了要編譯哪些檔案的設定。
另外 class 白名單也改成寫在 tailwind.config.js 上。
新增一段:v2 版白名單。

本篇要解決的問題

最近手邊的幾個案子都用 Vue CLI 在製作,而正巧也幾次在前端的 FB 社團中看到有人用 Tailwind CSS 用得很開心。

之前有看了一下 Tailwind CSS 的說明文件,看到要用 PostCSS 安裝就想放棄,因為以前是透過 Gulp 來裝 PostCSS 的,後來 Gulp 一更新寫法都不一樣,就生七七不用,所以看到要用 PostCSS 有點頭痛。

剛好這幾周在處理的案子,覺得 Tailwind CSS 這種的 Functional CSS 概念很好,就 copy 幾個常用的當輔助的 class 來使用。一用之下,嗯,確實好用。

主要是在寫每個 component 時,很不想寫完了 HTML,還要一直滑到頁面下去寫 CSS 的部份,直接用 Functional CSS 就方便多了,一邊寫 HTML 就一邊可以寫樣式,class 名稱也好懂,就愈用愈覺得順手,決定還是看一下 Vue CLI 要怎麼安裝 Tailwind CSS。

有一句話說:「找飯店,Trivago。寫程式,有Google。」對,是 August 說的 XD~

Google 了一下後,在 npm 上發現有一個套件可以直接協助安裝耶,試了一下,真的容易上手,就整理成這篇。

本篇介紹的明件就是:vue-cli-plugin-tailwind


安裝 Tailwind CSS

安裝完 Vue CLI 的專案後,用終端機開啟,輸入:

vue add tailwind

就會開始進行安裝,這中間會出現一個選項要選:

Generate tailwind.config.js
Generate tailwind.config.js

主要就是在問「要產生什麼樣子的 tailwind.config.js」檔?

none

不會產生 tailwind.config.js 檔,適用在我們已經有了自己常用的 config 檔,或是想全用預設值。

minimal

會建立一個 tailwind.config.js 的檔,主要是給我們客製一些項目用。相當於:

npx tailwindcss init

選擇 minimal 的話,產生的 config 會是以下內容:

full

會建立一個 tailwind.config.js 的檔,裡面會有所有的設定值,相當於:

npx tailwindcss init --full

檔案內容官方有提供:defaultConfig.stub.js

none、minimal、full,選擇好後就安裝完成了,可以直接使用 Tailwind CSS。


postcss.config.js

安裝完後,會自動產生一個 postcss.config.js 的檔案,主要是可以改變 build 出來後的 CSS 檔案。

如果我們不想拿 tailwind.config.js 當 config 檔,想用自己取的檔名,就在 postcss.config.js 中寫:

module.exports = {
  plugins: {
    tailwindcss: 'custom-name.js',
    //...
  },
};

因為這個套件包有 purgecss 的功能,在 build 檔案出來時會刪掉沒用到的 style 以便減少檔案大小。

但有時我們要用的 class 是由 JS 加進去的,遇到這情況如果也自動被刪掉,就很悲摧。

purgecss 可以加入白名單,讓白名單內的 class 不會被刪掉,使用如下:


v2 版白名單

參考文件:PurgeCSS options

v1.x 版,class 的白名單是寫在 postcss.config.js 上。

到了 v2.x 版,class 白名單則是改寫在 tailwind.config.js 上,如果裝了 v2.x 版,而仍是寫在 postcss.config.js 上的話會報錯。

白名單的寫法:

Summary
Vue CLI 安裝 Tailwind CSS
Article Name
Vue CLI 安裝 Tailwind CSS
Description
本篇大綱:本篇要解決的問題。安裝 Tailwind CSS -none、minimal、full。postcss.config.js。Google 了一下後,在 npm 上發現有一個套件可以直接安裝,而且容易上手,就整理成這篇。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言