技術 Day 11：「動起來！動起來！」- 用 Tailwind 簡單做出過渡和動畫效果

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

技術 Day 10：「伸縮自如的，橡膠...」- 斷點 / RWD

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

技術 Day 09：「啊～不要碰我！我會變色～」- 變化模式 (Variants)

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

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

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

技術 #8 Button Ripple Effect（原生JS版）、#5. Q&A Section（Vue版)

Button Ripple Effect（原生JS版） CodePen Link: https://codepen.io/zyrxdkoz/pen/yLXgxO...

技術 Day 07：「金魚模仿遊戲～」- 用 Tailwind 來對齊內容

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

技術 Day 06：「愛排隊的兔兔有紅蘿蔔！」- Flex 與 Grid

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

技術 Day 05：「別過來！要保持社交距離！」 Tailwind 中的空間與距離

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

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

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

技術 Day 03：「開始乘風飛行！」- 樣式都不見了嗎？快用 Tailwind 輕鬆調整文字版式

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

達標好文 技術 Day 02：「Tailwind CSS？那好吃嗎？」- 淺談 Tailwind 的核心概念

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

達標好文 技術 Day 01：「排版神器 Tailwind CSS？」 - 和兔兔一起快速上手漂亮的元件開發

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

達標好文 技術 Day 00：[目錄] 排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！

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

技術 #0. 前言＋環境配置

前言 Hi!我是SingYo，謝謝你點進來看這個系列！這是我第一次參加鐵人賽。 其實說30個前端「任務」有點籠統，較精確的說法會像是UI元件（UI compon...

技術 Rails幼幼班--Rails安裝Tailwindcss

用gem跟CDN不好嗎... 這麼簡單的事情也要分享?? 因為,沒常安裝就忘東忘西了... 認命做一篇筆記... 快速設定,預設模式全開,如需客制,請再至官...