iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

初見 Tailwindcss 系列

新手,一天一點來認識一下 utilities 的 css 框架。

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1 - 前言

雜談 今年是個很特別的一年,對威爾豬來說也是,從沒寫過任何形式的筆記或文章,也沒什麼特別規劃,居然就衝動的報名了鐵人賽,搞得威爾豬現在非常的緊張,不知道接下來3...

2021-09-01 ‧ 由 威爾豬 分享
DAY 2

Day 2 - 環境配置

開始前 首先威爾豬使用的是 Mac,編輯器用的是 Visual Studio Code,如果是使用 Windows 的同學應該也沒啥區別吧!然後你的電腦必須先安...

2021-09-02 ‧ 由 威爾豬 分享
DAY 3

Day 3 - 試試 Tailwind CLI

記得一定要搭配上一篇環境配置的前半段! 使用 Tailwind CLI 安裝 先建立一個資料夾(名稱可自訂),並用 VS Code 開啟。 mkdir...

2021-09-03 ‧ 由 威爾豬 分享
DAY 4

Day 4 - Just In Time (JIT) 即時模式

JIT 即時模式 繼上一篇提到開啟 JIT 模式有許多優點,今天威爾豬就來淺談這個有點厲害的新即時編譯器到底有啥了不起。不過目前這項功能類似搶先試用狀態,而且...

2021-09-04 ‧ 由 威爾豬 分享
DAY 5

Day 5 - 斷點設定

Tailwindcss 使用 normalize.css 來當作初始化樣式,和 Bootstrap 一樣,但它不像 Bootstrap 會幫你加一些小間距,簡...

2021-09-05 ‧ 由 威爾豬 分享
DAY 6

Day 6 - 顏色設定

和其它 CSS 框架一樣,Tailwind 也內建顏色,但它不像 Bootstrap 就給那幾組,給的根本是調色盤,顏色由淺到深都幫咱們定義好了,雖然 Boo...

2021-09-06 ‧ 由 威爾豬 分享
DAY 7

Day 7 - 文字使用方式

字體大小 相信大家以往在寫 CSS 時,也有寫過像這種 text-12、font-12 看起來很聰明的蠢事吧!其實這是不太好的寫法,相對也會造成 CSS 肥大的...

2021-09-07 ‧ 由 威爾豬 分享
DAY 8

Day 8 - 導入 Google Fonts

昨天講了文字使用,今天來講講字體。在默認情況下,Tailwind 提供了三種字體系列:font-sans (無襯線字體),font-serif (襯線字體) 和...

2021-09-08 ‧ 由 威爾豬 分享
DAY 9

Day 9 - 間距使用方式

相信在座的看倌都知道 marge、padding 是做什麼用的,還不知道的同學可能要自行補一下 CSS,威爾豬在這邊就不多說了。這邊不要再用自以為聰明的蠢方法...

2021-09-09 ‧ 由 威爾豬 分享
DAY 10

Day 10 - 寬高尺寸使用

既然昨天提到自訂 spacing,width和height 也會跟著繼承,今天威爾豬就來講講寬高的使用吧。 寬度 固定寬度 使用方式為:w-{number},沒...

2021-09-10 ‧ 由 威爾豬 分享