什麼是 Tailwind CSS?
Tailwind CSS 是一套 Utility-First CSS,具有彈性、快速刻板的特點。
Tailwind 的特點
Tailwind 的 Configuration
Configuration 是「結構配置、架構設置」的意思,Tailwind 本身有彈性的Configuration 功能,例如顏色、邊界、浮動。加上 plugin 可以快速處理複雜的問題。
文字大小 的 ConfigfontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
},
安裝設定 Tailwind
步驟1. 通過 npm 安裝 Tailwind CSS,並創建 tailwind.config.js 文件。
安裝 node.js
在安裝 npm 之前,要先下載安裝 node.js LTS 版本,安裝完畢 node 也會將 npm 設置好。npm 是「套件管理工具」,可以從中下載很多種套件,並操作各種項目去做整合。
如何判斷 npm 有沒有安裝成功?
mac:開啟終端機,輸入 npm -v,如有跳出版本號,即是成功。
windows:開啟命令提示字元,輸入 npm -v,如有跳出版本號,即是成功。
設定終端機
新增一個要使用 Tailwind 的資料夾,在終端機中輸入cd+半形空格,拖移資料夾到空格後面,設定成功即出現資料夾名稱。
在終端機輸入 Tailwind 的 npm,並按下Enter:
npm install -D tailwindcss
npx tailwindcss init
mac 如果出現安裝錯誤,可以輸入以下指令,用更高權限安裝:
sudo npm install tailwindcss
等待終端機下載完畢,會看到資料夾內多了一個資料夾跟三個檔案,就是完成第一步驟了。
步驟2. 在文件中添加所有模板文件的路徑 tailwind.config.js。
開啟 vscode 把資料夾拖入,在資料夾中有一個檔案 tailwind.config.js,打開將以下指令覆蓋:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
步驟4. 產生output.css
在終端機上輸入以下指令:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
意思是,要將 input.css 裡面的code進行編譯,並建立一個 output.css 檔案。此時你會看到資料夾多一個 output.css 檔案,就可以將它添加到<head>。
步驟5. 將已編譯的 CSS 文件添加到<head>並開始使用 Tailwind
在 scr 中新增一個 html 檔案,並輸入以下預設 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dist/output.css">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
vscode 可使用 Live Server 開啟 html 檔,同步變更css。
步驟6. vscode 安裝 Tailwind CSS IntelliSense 智能建議
安裝 Tailwind CSS IntelliSense 可以自動產生建議的 css,建議安裝。
到目前為止, Tailwind 的安裝設定已經完成,而 Tailwind 有彈性的客製化功能,可以讓網頁更多元性,而不會像套版那樣死板。
所以接下來,要開始學習使用客製化的設定!
※ 注意,當重新開啟製作檔的時候,要記得先在終端機輸入:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
不然新增或刪除的 css 不會更新。