iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發! 系列

嗨大家好我是 Tailwind CSS Taiwan 的 搋兔 ~!

相信有在接觸前端領域的人都大概有聽過 Tailwind CSS 或是已經開始使用了吧?
為什麼 Tailwind 可以被稱為排版神器呢?

其實沒聽過或不知道也沒有關係~因為我會完完整整的把 Tailwind 介紹一遍哦!
還有 Tailwind 雖然沒有像 Bootstrap 有這麼多內建可以使用的元件,
但是元件是可以自己做的呀!

所以這 30 天的時間,和兔兔一起學習 Tailwind CSS 並做出有趣實用而且美美的元件吧!

鐵人鍊成 | 共 32 篇文章 | 100 人訂閱 訂閱系列文 RSS系列文 團隊IT成長營
DAY 1

Day 00:[目錄] 排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!

目錄 Day 1:「排版神器 Tailwind CSS?」 - 和兔兔一起快速上手漂亮的元件開發 Tailwind CSS 篇 Day 02:「Tailwi...

2021-09-02 ‧ 由 搋兔 分享
DAY 1

Day 01:「排版神器 Tailwind CSS?」 - 和兔兔一起快速上手漂亮的元件開發

嗨各位大家好,我是搋兔~! 相信大家一定都對我很陌生吧! 先來自我介紹一下,我是兔兔教的兔兔,我在「Tailwind CSS 臺灣」的職位是兔兔,而兔兔們的工...

2021-09-02 ‧ 由 搋兔 分享
DAY 2

Day 02:「Tailwind CSS?那好吃嗎?」- 淺談 Tailwind 的核心概念

嗨各位! 我們終於度過了昨天那篇漫長的業配文了,很快的我們就要開始進入主餐部分。 雖然你們已經把刀叉拿好了, 但是在上主餐之前,必須提醒一下剛吃完前菜的你們:...

2021-09-03 ‧ 由 搋兔 分享
DAY 3

Day 03:「開始乘風飛行!」- 樣式都不見了嗎?快用 Tailwind 輕鬆調整文字版式

前一篇啊寫了將近 5000 字的廢話,你們一定看的很煎熬吧 XD 但是今天終於可以有進度啦!我們要來開始實作 Tailwind 了! 雖然不能一開始就編排美美...

2021-09-04 ‧ 由 搋兔 分享
DAY 4

Day 04:「當個方塊設計師」- 製作自己的方塊,改變大小並加上背景色彩及邊框

Day 3 的作業有沒有寫呢各位? 如果昨天有練習的話,應該覺得不會太難吧! 我們今天會用一樣的方式來介紹 + 練習, 今天的也不難哦~是做方塊的各種樣式變化...

2021-09-05 ‧ 由 搋兔 分享
DAY 5

Day 05:「別過來!要保持社交距離!」 Tailwind 中的空間與距離

一次收兩份作業的時候到囉! 沒寫作業的手伸出來,手心朝上!! 我! 再給你一天 XDDD 今天要做的也很簡單哦, 那麼,就開始囉!   材料 一樣,第一個介...

2021-09-06 ‧ 由 搋兔 分享
DAY 6

Day 06:「愛排隊的兔兔有紅蘿蔔!」- Flex 與 Grid

昨天被討薪水,今天還在躲 ... 唉, 所以今天就不收作業了。 (兔導今天回學校兼課,帶即將畢業的新兔演員。) 「兔導! 想請問一下實務上有沒有很便捷的排列方...

2021-09-07 ‧ 由 搋兔 分享
DAY 7

Day 07:「金魚模仿遊戲~」- 用 Tailwind 來對齊內容

(今天切換故事主線了喔,別再吐倒了哦) 相信很多在前端打滾、需要用到 CSS 的人,一定或多或少都看過 Amos 的金魚也能懂系列鐵人賽文章吧? 還記得有一個...

2021-09-08 ‧ 由 搋兔 分享
DAY 8

Day 08:「兔老闆的文件」- 半透明的我及有陰影的你

(場景快速轉換到兔大王公司) 兔老闆: 「這個 logo 要有一點陰影,沒有底色也太單調」 「然後這個浮水印刷淡點啊,字都看不到了」 「最好是顏色豐富、撞色一...

2021-09-09 ‧ 由 搋兔 分享
DAY 9

Day 09:「啊~不要碰我!我會變色~」- 變化模式 (Variants)

欸欸欸!別誤會啊! 可別讀完標題就跑掉了。 「可是兔兔,你那個標題不妥吧!」 齁,我才是覺得你想的不妥咧~ 那個是會變顏色的意思啦! 今天,就是要來介紹一些像...

2021-09-10 ‧ 由 搋兔 分享