iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

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

Day 10:「伸縮自如的,橡膠...」- 斷點 / RWD

大家昨天的作業有寫嗎?應該寫得很開心吧 XD 是啊,畢竟可以用這麼簡單的方式來完成,就能觸發 hover 之類的狀態然後改變樣式。這可是原本純 CSS、Sas...

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

Day 11:「動起來!動起來!」- 用 Tailwind 簡單做出過渡和動畫效果

還記得我們在之前做過變化模式嗎?沒錯,就是滑鼠懸停之後會變色的那個。 我們今天呢,就是要來幫它們加上過渡效果和動畫! 今天我們就不多講廢話了,直接開始吧! ...

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

Day 12:「我可不可以 CDN 就好?」- Tailwind 安裝及設定

前面的功能介紹和小練習都度過了,我們現在要來學習如何安裝和設定囉!!! 不過說到安裝啊,有些人可能會想: 「兔兔!如果我只是想要做簡單的應用和練習呢? 還要安...

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

Day 13:「誰還在背字典?」- Tailwind IntelliSense 插件

嗨大家好,昨天建立的如何呢!我想應該不會遇到太多的困難吧~ 雖然上次沒有明講,但我想應該大部分人都是用 VS Code 在開發吧? 既然如此我們就來介紹個好用...

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

Day 14:「怎麼跟阿嬤的裹腳布一樣啦!」- 提取成元件

「噁 ... 那條是什麼鬼東西啦!」「對啊 ... 也太可怕了吧 ...」 「嘔! 還很臭欸 ...」「那是阿嬤的裹腳布吧!!!!」 「不是啦 ...,那個就...

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

Day 15:「你真的不減肥嗎...?」- Tailwind 的生產環境優化

兔大媽:「百貨公司在跳樓...大!拍!賣!!!(口水)」「趕快來去搶!!!」 (兔大媽掏出了小卡進行一番熱血的戰鬥) 兔大媽:「哇,害啊,買太多提不回家了....

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

Day 16:「寶藏,都藏在那裡了!」- Tailwind JIT 模式

JIT、JIT 的叫了這麼多天,終於就是今天了!今天就是要來講解 JIT 模式哦~~ JIT 模式真的快非常非常多,快到你覺得你前面幾天根本在浪費人生 XD...

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

Day 17:「我們,是好朋友哦~」- Vue 簡介

嗨各位,Tailwind 篇結束了,不知道會不會有人敲碗更多呢? 還想知道更多的話也沒有問題~不過今天要進入全新的篇章! 要說為什麼的話 ... 因為要想讓...

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

Day 18:「極速開發」- Vitawind

「閃電 + 疾風的組合嗎? 不錯不錯!」 既然我們之前都說了要用 Vue + Tailwind 來製作元件,那建立一個專案把這兩個東西安裝在一起總是必要的吧?...

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

Day 19:「通通拿去做雞精啦!」- Vue SFC

嗨大家~昨天有沒有試著用 Creator 建立專案呢! 沒有的話現在趕快去複習哦,因為我們今天會用到~ 之前有說過 Vue 是漸進式的,所以你用多用少都可以,...

2021-09-20 ‧ 由 搋兔 分享