iT邦幫忙

tailwindcss相關文章
共有 72 則文章
鐵人賽 Modern Web DAY 29

技術 網頁框架比一比-30天學會HTML+CSS,製作精美網站

介紹完如何製作響應式網站後,當然也會想說有沒有更快速的框架可以使用,所以今天就要來介紹目前最多人使用的Tailwind及Bootstrap 什麼是Tailwin...

鐵人賽 Modern Web DAY 30
TailwindCSS - 從零開始 系列 第 30

技術 TailwindCSS 從零開始 - 完賽心得

完賽的內心小劇場 心得 感謝堅持到最後的自己,本次鐵人賽完賽了,最後一篇就來點軟性的心得文吧! 因為專案關係開始接觸 TailwindCSS,也用 sid...

鐵人賽 Modern Web DAY 29
TailwindCSS - 從零開始 系列 第 29

技術 TailwindCSS 從零開始 - TailwindCSS 3.0.0-alpha.1 釋出

2021.10.2 於官方 GitHub 公告。 計畫趕不上更新 在程式的世界有一個特色,更新速度。 就在不久前 TailwindCSS 釋出 3.0...

鐵人賽 Modern Web DAY 28
TailwindCSS - 從零開始 系列 第 28

技術 TailwindCSS 從零開始 - 如何在 Angular 中使用 TailwindCSS

安裝說明 安裝環境 Angualr 11.2.6 node.js v14.17.0 建立一個 Angular CLI 可以參考這一篇 Angular 筆記...

鐵人賽 Modern Web DAY 27
TailwindCSS - 從零開始 系列 第 27

技術 TailwindCSS 從零開始 - 翻轉卡片實戰:TailwindCSS feat CSS

實作內容 此次會透過 TailwindCSS 與 SCSS 共同使用來完成此頁面,並透過 CSS 的屬性作出翻轉卡片的效果。 卡片版面實作 因要做翻轉卡片,所...

鐵人賽 Modern Web DAY 26
TailwindCSS - 從零開始 系列 第 26

技術 TailwindCSS 從零開始 - 價目表卡片實戰 - 使用官方套件實作登入表單

這次使用官方 form 套件來完成登入表單實作。 為什麼要使用官方 form 套件 雖然可以透過 TailwindCSS 高客製化的特性來完成樣式,但還是有點...

鐵人賽 Modern Web DAY 25
TailwindCSS - 從零開始 系列 第 25

技術 TailwindCSS - 價目表卡片實戰 - 登入彈窗開發

這次要來實作一個登入的彈窗效果,以前做彈窗大多是使用 Bootstrap 的彈窗元件或是 lightbox 的套件。這次就用 TailwindCSS 直接來刻...

鐵人賽 Modern Web DAY 24
TailwindCSS - 從零開始 系列 第 24

技術 TailwindCSS 從零開始 - 價目表卡片實戰 - 進階卡片樣式

前篇已經將基本的卡片樣式完成,要繼續完成幾個互動效果,會有以下內容: 滑鼠經過卡片會有放大效果。 RWD 效果,PC 版卡片為三欄。 透過 JS 迴圈方式產...

鐵人賽 Modern Web DAY 23
TailwindCSS - 從零開始 系列 第 23

技術 TailwindCSS 從零開始 - 價目表卡片實戰 - 基礎卡片樣式

上一篇完成了基礎設置,這次就來建立一個基礎卡片。 設定基礎卡片樣式外觀 標題部分因為了整個內容更完整,故有修改一下架構,但是很簡單的調整,是用一個 div...

鐵人賽 Modern Web DAY 22
TailwindCSS - 從零開始 系列 第 22

技術 TailwindCSS 從零開始 - 價目表卡片實戰 - 首頁標題樣式

前面講了這麼多簡單的觀念與使用方法,接下來的九篇都會是搭配 JIT 模式的實作練習,就來做一個簡易的價目表卡片吧! 建立專案架構 設定 body 背景色,使...

鐵人賽 Modern Web DAY 21
TailwindCSS - 從零開始 系列 第 21

技術 TailwindCSS 從零開始 - dark 深色模式

深色模式的原理 TailwindCSS 有趣的還有深色模式,可以透過 media 與 class 的方式啟動深色模式。 可以在配置檔 tailwind.con...

鐵人賽 Modern Web DAY 20
TailwindCSS - 從零開始 系列 第 20

技術 TailwindCSS 從零開始 - Just In Time 模式的有趣功能

未來更新趨勢 從官方文件可以看到在 JIT 模式中的 CSS 寫法可以非常的多樣且直覺,而未來 TailwindCSS 更新的核心與發展都會圍繞著 JIT 模...

鐵人賽 Modern Web

技術 Day 31:「不夠吃了...哪裡還有紅蘿蔔?」- Tailwind 和 Vue 的資源分享

大家有體會到自己建立元件的樂趣嗎? 如果沒有也沒關係~ 因為接下來會分享一些相關資源哦! 其實兔兔知道的資源並不是很多啦,因為兔兔的東西都會自己重造輪子 XD...

鐵人賽 Modern Web DAY 19
TailwindCSS - 從零開始 系列 第 19

技術 TailwindCSS - 初探 Just in Time 模式 v2.2

關於 JIT 模式 JIT(Just in Time Mode) 是在 TailwindCSS v2.1 以後才出現的功能,未來此框架開發也會圍繞在這個功能上...

鐵人賽 Modern Web DAY 30

技術 Day 30:「很刺眼,這樣太亮了啦!」- 深色模式切換開關

「最近眼睛都一直盯著電腦,超痠的」 「而且這台螢幕還壞掉,不能調整亮度」 這樣啊 ... 辛苦了, 不過可以不用調亮度啊,把主題換成深色主題就好了! 「深色主...

鐵人賽 Modern Web DAY 18
TailwindCSS - 從零開始 系列 第 18

技術 TailwindCSS 從零開始 - 簡單認識 PostCSS

前面有提到安裝 TailwindCSS 推薦使用 PostCSS,前面練習的都是沒有相依 PostCSS 來練習,但該面對的總是要面對,先來認識一下關於 CS...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 17
TailwindCSS - 從零開始 系列 第 17

技術 TailwindCSS 從零開始 - 切一個響應式留言按鈕畫面

前面了解基礎的使用後,來實戰一個簡單的留言按鈕與如何變成響應式的呈現。 基礎架構 有大頭照 有留言區按鈕 進行切版 跟 Bootstrap 有點像,最外...

鐵人賽 Modern Web DAY 15

技術 Day15 Sideproject(作品集) from 0 to 1 -刻畫面

昨天把整個專案架起來了 今天我們就可以開始來刻畫面了 這邊也要提一下之前我們其實是直接開寫 先從會員登入註冊開始然後慢慢想到什麼做什麼 畫面也超亂的 因為第一次...

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 16
TailwindCSS - 從零開始 系列 第 16

技術 TailwindCSS 從零開始 - 自訂 addBase 套件

修改基底樣式 addBase 專案會使用到很多的標題樣式,在不同的頁面都會出現,那我就可以訂一個套件專門給標題使用。 此時就可以使用修改基底樣式的函式 add...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 15
TailwindCSS - 從零開始 系列 第 15

技術 TailwindCSS 從零開始 - 使用官方套件,以 typography 為例

除了可以把樣式元件化,功能模組化外,Tailwind 也提供自定義套件的方式給開發者使用,看個人習慣怎麼用,就怎麼用,不過我自己覺得是自定義套件比較會用在框架...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 13

技術 Day13 繼續用 TailwindCSS 切版部落格文章內頁樣式

Day13!上一篇我們用 TailwindCSS 切版出了還不錯看的部落格首頁,顯示文章列表。今天讓我們乘勝追擊,繼續切版文章內頁樣式。 文章內頁就比較有趣了,...

鐵人賽 Modern Web DAY 14
TailwindCSS - 從零開始 系列 第 14

技術 TailwindCSS 從零開始 - 新增自己的 Utility

除了可以新增元件外,也可以增加自訂義的功能。 雖然 TailwindCSS 已經提供非常多好用的 class,但還是會遇到需要自定義功能的情況,以下就介紹怎麼...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 12

技術 Day12 用 TailwindCSS 切版部落格首頁,顯示 WordPress 文章列表

上一篇我們成功在 Next.js 安裝 TailwindCSS,今天我們要實際來切版首頁,顯示文章列表! 切版目標 這個系列文章主要在呈現用 Next.js 當...

鐵人賽 Modern Web DAY 13
TailwindCSS - 從零開始 系列 第 13

技術 TailwindCSS 從零開始 - 元件相同時,把共同樣式拉出來

單一按鈕樣式元件 前篇有寫到單一按鈕,可以把樣式拆成元件來使用。如下: @layer components{ .btn-green { @appl...

鐵人賽 Modern Web DAY 11

技術 Day11 TailwindCSS 介紹,在 Next.js 專案安裝 TailwindCSS

上一篇我們成功安裝完 GraphQL client,並在首頁顯示出文章列表了。功能做完,接下來要來切版美化樣式了! 在這邊我想使用 TailwindCSS 這套...