iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

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

Day 20:「資料拿來我就幫你改」- Vue 基礎觀念及常用語法

嘿~昨天的內容還行嗎? 「兔兔,昨天突然就接收到大量語法!」 齁,這個我就要說聲不好意思~原本是應該先介紹基本觀念,但我們今天基本觀念要寫在 SFC 裡面練習...

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

Day 21:「爸爸說,家裡要重新裝潢了」- 關於樣式的屬性綁定講解

兔女鵝:「爸爸,兔兔昨天講的好難」「有一大堆東西要記起來,要學不動了 QQ」 兔跋:「一定是家裡的裝潢太壓抑,要換!」 兔女鵝:「不是,爸爸...應該跟裝潢沒...

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

Day 22:「您好,歡迎登入 Vuta 奇幻世界」- 事件處理

「燈愣~」 (以下為系統登入事件的自動通知) 「您好,兔兔」「歡迎登入 Vuta 奇幻世界」 咦 ...?系統登入事件?摁,我昨天是有登入沒錯。 「燈愣~」...

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

Day 23:「兒子,這是你的零用錢」- 元件間的資料傳遞

兔大夫:「請問是兔豪的家屬嗎?」 兔豪爸:「是,我就是。 請問我鵝子他...」 兔大夫:「抱歉,我盡力了 ...」 「他得的是一種 "會常常跟你討零...

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

Day 24:「Switch 也要換遊戲片啦~」- Slot 插槽

不知道大家有沒有買 Switch 呢? 雖然兔兔沒有 Switch,但我知道有遊戲片都不便宜呀! 然後,遊戲總會有玩膩的時候這時候就要把記憶卡插槽裡的卡片拿出...

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

Day 25:「好慢喔,下載多少了?」- 進度條

終於到了我們的元件篇啦!!! 今天是第一個元件,所以稍微簡單一點。我們要來做下載的進度條~ 前置作業 我們這次要使用的專案環境是 Vue 的,所以之前建立過...

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

Day 26:「按鈕博物館」- 輕鬆變化各種按鈕元件

哈囉大家好~不知道昨天的進度條做的怎麼樣? 想要交作業的人可以貼在昨天的留言區給我呦! 那我們今天的內容也很簡單,二話不說,要開始囉? 前置作業 跟昨天的環...

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

Day 27:「流浪到淡水!」- 手風琴選單

嘿,今天是怎樣?都沒有人交作業,是不是昨天的太小菜一疊了! 今天是昨天的延伸,但說難也難不到哪裡去啦~ 因為相信經過前面的兩天,應該已經很清楚步驟了吧? 跟前...

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

Day 28:「今天幾月幾號啊?」- 簡易日曆

「今天是幾月幾號啊?」 今天是 ... 等等!不准看電腦上的! 你先等我造出一個,我們要看日期 ... 就看我們自己做的日曆! (這兔是有什麼毛病,連這個時候...

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

Day 29:「欸!你填一下這張表!」- 彈跳視窗、Modal

「注意,您的表單尚未填寫完成」 好,我知道了。 (按下確定) 欸? 為什麼關不掉!?不是按下確定就要關掉了嗎? 這是誰做的爛東西啊,看我怎麼整死你!   (開...

2021-09-30 ‧ 由 搋兔 分享