iT邦幫忙

tailwind css相關文章
共有 60 則文章
鐵人賽 自我挑戰組 DAY 7

技術 第七關 - Supabase 自部署:打造專屬的後端服務

除了使用 Supabase 官方雲端平台,你也可以選擇在自己的伺服器上部署 Supabase!這就像是把整個 Supabase 搬到你自己家裡,完全由你掌控。...

鐵人賽 自我挑戰組 DAY 6

技術 第六關 - Supabase CLI 常用指令大全

在前面的文章中,我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單,讓你在開發過程中能夠快速查找和使用這些實用...

鐵人賽 Software Development DAY 6

技術 第六關 - Supabase CLI 常用指令大全

在前面的文章中,我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單,讓你在開發過程中能夠快速查找和使用這些實用...

鐵人賽 Software Development DAY 5

技術 第五關 - Supabase CLI(下)- 本地資料表建立與雲端同步

在上集中,我們學會了如何安裝、設定 Supabase CLI 以及基本指令的使用。這一集將用最簡單的方式示範如何本地建立資料表、同步到雲端,以及進行資料填充。...

鐵人賽 Software Development DAY 4

技術 第四關 - Supabase CLI(上)- 安裝、設定、指令

Supabase CLI 是開發者在本地環境中管理 Supabase 專案的強大工具。透過 CLI,你可以在本地建立完整的 Supabase 開發環境,包括資...

鐵人賽 SideProject30 DAY 18

技術 Day18—開發日記(二)Tailwind

前言 今天繼續開發,重點著重在:初步探索Tailwind與理解App.vue。 工作重點 Tailwind 之前的專案架構下是使用了boostap切版,這次先諮...

鐵人賽 Mobile Development DAY 15

技術 Day 15 - 第二個 App 簡介與專案 Tailwind CSS 設定

今天已經是第 15 天了,轉眼間鐵人賽也達成了二分之一的進度。 今天開始要來實作第二個專案,我們要來做的是一個即時天氣 App。這次除了一樣使用 React N...

鐵人賽 Modern Web DAY 7

技術 D6 為自己的開發鮮豔上色,先用Tailwindcss來塗上喜歡的顏色

在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時,有UI design跟design吵,自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...

技術 巴哈瀑布流 Side Project 開發筆記 -1:Side Project 主題發想

本系列文章將會把怎麼建構巴哈瀑布流、所有遇到的問題毫不保留全部紀錄 之前非本科菜雞如我,用 React 做了個失智列車網站,就去投了兩個前端實習(講白了整個...

鐵人賽 Modern Web DAY 26

技術 使用 kbar 加入 Command Palette 指令面板 - Modern Next.js Blog 系列 #26

這是「Modern Blog 30 天」系列第 26 篇文章。 上一篇加完了留言系統,這篇我們繼續加入另一個酷炫功能:「Command Palette 指令面板...

鐵人賽 Modern Web DAY 17

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

更改網頁的 title,建立 Meta 元件:(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...

鐵人賽 Modern Web DAY 16

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上,增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

鐵人賽 Modern Web DAY 15

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後,要秀出這些資料在螢幕上,需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...

鐵人賽 Modern Web DAY 14

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js: npm i @supabase/supabase-js 接著,在根目錄,建立 client.j...

鐵人賽 Modern Web DAY 13

技術 文章內頁樣式切版 - Modern Next.js Blog 系列 #13

TL;DR 這是「Modern Blog 30 天」系列第 13 篇文章,上一篇我們使用 Tailwind CSS 美化了首頁樣式,這篇我們會繼續美化文章內頁樣...

鐵人賽 自我挑戰組 DAY 15

技術 Day15 - 探索 Flex 的奧妙

在先前 Day07 - Display 的大小事 有針對 Display 屬性做說明,Flex 也是 Display 屬性之一,那麼開始今天的 Flex 章節...

鐵人賽 Modern Web DAY 12

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

新增 Navbar 至每個網頁頂端:利用 Next 的 Layout 元件,來建立每個網頁都可以看到的 Navbar。新增 components/Layout....

鐵人賽 Modern Web DAY 12

技術 首頁樣式切版 - Modern Next.js Blog 系列 #12

TL;DR 這是「Modern Blog 30 天」系列第 12 篇文章,上一篇我們使用 Tailwind CSS 美化了 navbar, footer 等全站...

鐵人賽 Modern Web DAY 11

技術 全站樣式切版 - Modern Next.js Blog 系列 #11

TL;DR 這是「Modern Blog 30 天」系列第 11 篇文章,上一篇我們在 Next.js blog 搭配 Tailwind CSS 加入了「暗黑模...

鐵人賽 自我挑戰組 DAY 13

技術 Day13 - 寬度、高度

寬度/高度單位 昨日 Day12 - 掌握空間與距離,版面不再跑版 有提到 Tailwind CSS 中,間距的數字會以 4 的倍數為單位,舉例來說:1.25...

鐵人賽 Modern Web DAY 10

技術 Dark Mode 深色模式支援,使用 Tailwind CSS、next-themes - Modern Next.js Blog 系列 #10

這篇我們來讓上一篇安裝完的 Tailwind CSS 支援暗黑模式(深色模式、Dark mode)。 並搭配 next-themes 管理主題切換以及偏好主題的...

鐵人賽 Modern Web DAY 10

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

這個 app 將從 supabase 讀取資料,在透過自製 Tailwind CSS 元件,呈現類似 netflix,hulu 的影像畫廊(image gall...

鐵人賽 Modern Web DAY 9

技術 安裝 Tailwind CSS 和相關 ESLint、Prettier 設定 - Modern Next.js Blog 系列 #09

TL;DR 這是「Modern Blog 30 天」系列第 9 篇文章,上一篇我們讓 Contentlayer 也支援了 MDX 格式。這篇讓我們來安裝 Tai...

鐵人賽 自我挑戰組 DAY 11

技術 Day11 - 點綴元素的好夥伴 - border

邊框 善用邊框對於元素有很好的輔助效果,像是方形的方塊加上圓角可以使元素看起來更圓滑,input 標籤加上 :foucs改變邊框顏色讓使用者清楚目前點擊的元素...

鐵人賽 自我挑戰組 DAY 10

技術 Day10 - 為背景增添變化吧!

背景 Background 語法相信大家都不陌生,最常使用在調整背景顏色及背景圖片的設定。Tailwind CSS 預設許多顏色,詳細可查閱 Tailwind...

鐵人賽 自我挑戰組 DAY 8

技術 Day08 - 掌握 Position,元素不再亂跑

位置 什麼是 Position ?用於控制元素在 DOM 中的位置。 Position 特性 static fixed absolute relative...

鐵人賽 自我挑戰組 DAY 7

技術 Day07 - Display 的大小事

什麼是 Display? 每一種 HTML 標籤都有預設的 Display 屬性,這些 Display 會影響網頁上的排版,要學會網頁排版我們得先了解基本的...

鐵人賽 自我挑戰組 DAY 6

技術 Day06 - 自定義參數

配置 先前有提到 Tailwind CSS 是一套以 utility-first 為基礎的 CSS 框架,它的設計從一開始就考慮到定制。 如何設定參數 透過終...

鐵人賽 自我挑戰組 DAY 5

技術 Day05 - Tailwind JIT 模式使人快樂

什麼是 JIT? JIT 為 Just In Time 的縮寫,開發的專有名詞可以比喻成即時編譯,即時生成樣式的 class。這個即時引擎是 Tailwind...

鐵人賽 自我挑戰組 DAY 4

技術 Day04 - 如何使用 Tailwind CSS?

使用方式 CDN npm 指令 什麼是 CDN?內容傳遞網路(CDN)是指一組分佈在不同地理位置的伺服器,協同工作以提供網際網路內容的快速交付,直接引用...