iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 221 瀏覽

鐵人賽 SideProject30 DAY 18

從零開始的firebase與Vue框架ーSNS專案系列第 18 篇

技術 Day18—開發日記（二）Tailwind

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

ch0902 ‧ 2023-10-03 ‧團隊好想工作室 v7.0

0 Like 0 留言 205 瀏覽

鐵人賽 Mobile Development DAY 15

掌握 React Native 與 Expo：30天雙打，新手也能精通跨平台開發！系列第 15 篇

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

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

Bucky ‧ 2023-09-30 ‧團隊大船要開囉

0 Like 0 留言 243 瀏覽

鐵人賽 Modern Web DAY 7

從0開始的的Angular站台架設-Stnadalone 系列第 7 篇

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

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

Otto_auto ‧ 2023-09-17

0 Like 0 留言 1086 瀏覽

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

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

燐火幽冥 ‧ 2022-11-15

0 Like 0 留言 864 瀏覽

鐵人賽 Modern Web DAY 26

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 26 篇

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

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

EasonChang ‧ 2022-10-11

0 Like 0 留言 533 瀏覽

鐵人賽 Modern Web DAY 17

Full Stack Web Development 網站實作系列第 17 篇

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

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

tjabi ‧ 2022-10-02

0 Like 0 留言 338 瀏覽

鐵人賽 Modern Web DAY 16

Full Stack Web Development 網站實作系列第 16 篇

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

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

tjabi ‧ 2022-10-01

0 Like 0 留言 441 瀏覽

鐵人賽 Modern Web DAY 15

Full Stack Web Development 網站實作系列第 15 篇

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

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

tjabi ‧ 2022-09-30

0 Like 0 留言 579 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

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

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

tjabi ‧ 2022-09-29

0 Like 0 留言 798 瀏覽

鐵人賽 Modern Web DAY 13

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 13 篇

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

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

EasonChang ‧ 2022-09-28

0 Like 1 留言 870 瀏覽

鐵人賽自我挑戰組 DAY 15

從零開始的 Tailwind CSS 學習之旅系列第 15 篇

技術 Day15 - 探索 Flex 的奧妙

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

肉鬆 ‧ 2022-09-28

0 Like 0 留言 815 瀏覽

鐵人賽 Modern Web DAY 12

Full Stack Web Development 網站實作系列第 12 篇

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

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

tjabi ‧ 2022-09-27

0 Like 0 留言 713 瀏覽

鐵人賽 Modern Web DAY 12

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 12 篇

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

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

EasonChang ‧ 2022-09-27

0 Like 0 留言 1331 瀏覽

鐵人賽 Modern Web DAY 11

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 11 篇

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

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

EasonChang ‧ 2022-09-26

0 Like 0 留言 1494 瀏覽

鐵人賽自我挑戰組 DAY 13

從零開始的 Tailwind CSS 學習之旅系列第 13 篇

技術 Day13 - 寬度、高度

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

肉鬆 ‧ 2022-09-26

0 Like 0 留言 672 瀏覽

鐵人賽 Modern Web DAY 10

Full Stack Web Development 網站實作系列第 10 篇

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

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

tjabi ‧ 2022-09-25

0 Like 0 留言 2620 瀏覽

鐵人賽 Modern Web DAY 10

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 10 篇

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

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

EasonChang ‧ 2022-09-25

0 Like 0 留言 2614 瀏覽

鐵人賽 Modern Web DAY 9

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 9 篇

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

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

EasonChang ‧ 2022-09-24

0 Like 1 留言 883 瀏覽

鐵人賽自我挑戰組 DAY 11

從零開始的 Tailwind CSS 學習之旅系列第 11 篇

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

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

肉鬆 ‧ 2022-09-24

0 Like 1 留言 752 瀏覽

鐵人賽自我挑戰組 DAY 10

從零開始的 Tailwind CSS 學習之旅系列第 10 篇

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

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

肉鬆 ‧ 2022-09-23

0 Like 1 留言 972 瀏覽

鐵人賽自我挑戰組 DAY 8

從零開始的 Tailwind CSS 學習之旅系列第 8 篇

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

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

肉鬆 ‧ 2022-09-21

1 Like 1 留言 790 瀏覽

鐵人賽自我挑戰組 DAY 7

從零開始的 Tailwind CSS 學習之旅系列第 7 篇

技術 Day07 - Display 的大小事

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

肉鬆 ‧ 2022-09-20

0 Like 0 留言 849 瀏覽

鐵人賽自我挑戰組 DAY 6

從零開始的 Tailwind CSS 學習之旅系列第 6 篇

技術 Day06 - 自定義參數

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

肉鬆 ‧ 2022-09-19

0 Like 0 留言 690 瀏覽

鐵人賽自我挑戰組 DAY 5

從零開始的 Tailwind CSS 學習之旅系列第 5 篇

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

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

肉鬆 ‧ 2022-09-18

0 Like 0 留言 1371 瀏覽

鐵人賽自我挑戰組 DAY 4

從零開始的 Tailwind CSS 學習之旅系列第 4 篇

技術 Day04 - 如何使用 Tailwind CSS？

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

肉鬆 ‧ 2022-09-17

0 Like 0 留言 899 瀏覽

鐵人賽自我挑戰組 DAY 3

從零開始的 Tailwind CSS 學習之旅系列第 3 篇

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

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

肉鬆 ‧ 2022-09-16

0 Like 0 留言 807 瀏覽

鐵人賽自我挑戰組 DAY 2

從零開始的 Tailwind CSS 學習之旅系列第 2 篇

技術 Day02 - Bootstrap 與 Tailwind CSS 差異

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

肉鬆 ‧ 2022-09-15

0 Like 1 留言 1136 瀏覽

鐵人賽自我挑戰組 DAY 1

從零開始的 Tailwind CSS 學習之旅系列第 1 篇

技術 Day01 - 什麼是 Tailwind CSS？

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

肉鬆 ‧ 2022-09-14

5 Like 3 留言 2364 瀏覽

鐵人賽自我挑戰組 DAY 30

C# 雞礎觀念系列第 30 篇

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

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

孤獨一隻雞 ‧ 2021-10-01

0 Like 0 留言 586 瀏覽