iT邦幫忙

tailwind css相關文章
共有 55 則文章
鐵人賽 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)是指一組分佈在不同地理位置的伺服器,協同工作以提供網際網路內容的快速交付,直接引用...

鐵人賽 自我挑戰組 DAY 3

技術 Day03 - 命名燒腦?Tailwind CSS 解決你的痛點

總是被命名困擾?花費太多時間在命名上… 相信看到標題很多人同感身受,因為我自己也是過來人…常見的命名規則有三種: OOCSS SMACSS BEM 我們這...

鐵人賽 自我挑戰組 DAY 2

技術 Day02 - Bootstrap 與 Tailwind CSS 差異

請問你使用的是 Bootstrap 還是 Tailwind CSS? 先前待的公司是屬於網頁接案類型,會依據客戶的產業類別、文案去做客製化網站。每個案子的設計...

鐵人賽 自我挑戰組 DAY 1

技術 Day01 - 什麼是 Tailwind CSS?

嗨~大家好,我是肉鬆。是一位喜愛傑尼龜的人,傑尼、傑尼。 什麼是 Tailwind CSS? 在 官網 首頁的描述,可以看到 Tailwind CSS 是一套...

鐵人賽 自我挑戰組 DAY 30
C# 雞礎觀念 系列 第 30

技術 [Day30]C# 不雞礎觀念- Install Tailwind Css with ASP.NET MVC5

今天是鐵人賽最後一天,我們來點不一樣的,就是Tailwind Css啦 一.先前準備 建立新資料夾 將資料夾命名為jit_init 開啟資料夾位置...

鐵人賽 Modern Web DAY 15

技術 [Day 15]吶吶,還有一半別想跑(前端篇)

挑戰目標: MockNative Camp 今天繼續來製作我們的Footer,目標前兩天我們已經將這些顯示文字都寫入到config中next.config.j...