2 種快速安裝、使用 Tailwind CSS 的方式

2 種快速安裝、使用 Tailwind CSS 的方式
2 種快速安裝、使用 Tailwind CSS 的方式

本篇要解決的問題

之前寫過一篇〈Vue CLI 安裝 Tailwind CSS〉,那是用 Vue CLI 時的安裝方法。當時在看的文件檔是 1.x 版的,所以一直以為要安裝 Tailwind CSS 就一定要透過 PostCSS,就沒有考慮在一般的專案上使用。

直到最近又翻了一下文件,發現 2.x 版的可以不用安裝 PostCSS 就能使用,驚為天人!剛好手邊有個小功能要製作,順手試了一下,發現很 OK,就決定整理成這篇。

本篇筆記文會整理二種安裝及使用 Tailwind CSS 的方法,一種是官方文件上的 Tailwind CLI,一種是國外大神製作的 JS。


方法 1:Tailwind CLI

文件:Using Tailwind CLI

要用 Tailwind CLI 來進行安裝,必須先安裝 Node.js 12.13.0 以上。

以下的示範,會把原始檔放進「src」的資料夾,把編譯後的檔案放進「dist」的資料夾。

建立 tailwind.css 檔

我們在「src」資料夾裡新增一個「tailwind.css」的檔案,tailwind.css 的內容如下:

@tailwind base;
@tailwind components;
@tailwind utilities;

檔名不一定要叫 tailwind.css,可以取自己想取的名稱。

上面程式碼的三行可以自行取捨,像 August 在用的時候不希望使用 base,就把 @tailwind base; 這行給刪掉。

檔案裡面也可以寫自己需要的 CSS,Tailwind 在編譯時會一起寫進去。

建立 tailwind.config.js 檔

tailwind.config.js 可以寫一些設定,或是建立自己要的變數,還可以選擇 purge 要去查哪些檔案。

文件上是沒有說一定要建立這個檔案,但建議是建出來,自己控制的程度會比較高。

在資料夾內開啟終端機,輸入:

npx tailwindcss init

如果是要安裝 V3 版,則是輸入:

npm install tailwindcss@latest postcss@latest autoprefixer@latest
或
yarn add tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init

過幾秒後,就會看見根目錄下新增了一個 tailwind.config.js 的檔案,裡面有以下內容:

purge 就是要檢查哪些檔案,把沒用到的 CSS 給刪除,因此建議填寫,可以寫以下:

purge: {
  content: ['./**/*.html', './**/*.js']
}

tailwind.config.js 檔裡可以自己手動新增一行:

mode: 'jit'

JIT 是 2.1 版以上才有的新功能,本篇就不多介紹,可以看說明文件:Just-in-Time Mode

這邊之所以要提出 mode: 'jit',是因為在實作時發現會對編譯的檔案有即時影響。

如果是用 JIT 的模式,我們就不用另外執行 Build 的動作,CSS 檔案就直接可以用了。

但不知道是不是 August 哪裡寫錯,JIT 模式下一直抓不到 transform,像是 rotatescale 在編譯出來的檔案都一直抓不到。

如果不是 JIT 模式,那我們在開發時會看見編譯出的 CSS 檔是整包的 Tailwind CSS,必須另外執行 Build 才會去做 purge 把沒用到的 CSS 給刪除,但在使用 transform 時就都正常。

開發時的監聽

以上二步就安裝好 Tailwind CSS 了,接著是使用,我們在開發時要能一邊寫下 class name 後一邊看到頁面成果。

在資料夾內開啟終端機,輸入:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch

規則就是:

npx tailwindcss -i 來源檔案 -o 編譯後存到哪個檔案 --watch

--watch 是持續監聽,只要我們 purge 的檔案有更新,Tailwind CSS 就會立即改變輸出的檔案。

上面是官方文件提供的範例,來源檔案是「src/tailwind.css」,編譯後的檔案會存在「dist/tailwind.css」。

我們在 HTML 上要引用的 CSS 檔是編譯後的:

<link href="dist/tailwind.css" rel="stylesheet">

預設支援 Autoprefixer,如果不想要 Autoprefixer 的功能,就加上 --no-autoprefixer,如:

npx tailwindcss --no-autoprefixer -i ./src/tailwind.css -o ./dist/tailwind.css --watch

上線前的編譯 Building for production

在上面開頭有寫,如果不是 JIT 模式,我們編譯出的 CSS 檔會是整包 Tailwind CSS 的檔案,大概是 3.7MB,這包真的放上頁面就等著飛天吧。

因此要上線前,記得把檔案 Build 過,讓 Tailwind CSS 執行 purge 刪除沒用到的 CSS。

在資料夾內開啟終端機,輸入:

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify

規則就是:

NODE_ENV=production npx tailwindcss -i 來源檔案 -o 編譯後存到哪個檔案 --minify

--minify 可加可不加,加的話 CSS 檔就會被壓縮成一行,可以減少檔案大小。

以上,就是 August 在實作時有用到的部份,還有一些功能沒有寫出來,主要是跟 PostCSS 相關,想研究的話請自行看文件囉。


方法 2:引用大神 JS 檔

文件:Tailwinds JIT compiler via CDN

網路上充滿著許多大神,為達成讓 JavaScript 統一宇宙的野望而不斷努力著。

這個 JS 是朋友前陣子推薦的,幾乎是一秒就可以安裝好 Tailwind CSS 並且使用。

安裝方式很簡單,在頁面上引用一行:

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

嗯……就安裝好了,可以直接使用 Tailwind CSS,還支援 JIT 模式。

文件上的說明都寫的很清楚,每一個功能也有給範例的程式碼,這邊,似乎不用再寫下去了 XD。

不過這套有一個不方便的地方,就是不像我們用 Tailwind CLI 那樣,可以選擇要使用哪一些樣式,比方無法選擇要不要使用 @tailwind base;

會變成只要引用了 JS,預設就會有 Tailwind CSS reset 的樣式,如果一個頁面是已經有許多 CSS 檔寫刻好樣式了,就會被影響。

也因為這個原因,之前原本在修改既有頁面時想用這一招的,看到樣式被影響只好作罷。


本篇整理了這二種安裝、使用 Tailwind CSS 的方式,祝大家使用愉快啦~

Summary
2 種快速安裝、使用 Tailwind CSS 的方式
Article Name
2 種快速安裝、使用 Tailwind CSS 的方式
Description
本篇大綱:本篇要解決的問題。方法 1:Tailwind CLI、建立 tailwind.css 檔、建立 tailwind.config.js 檔、開發時的監聽、上線前的編譯 Building for production。方法 2:引用大神 JS 檔。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
Mia
Mia
3 年 之前

非常有用,看到最新文章開始有英文篇,簡直是跪在螢幕前了。