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

2 Like 2 留言 16967 瀏覽

技術 CSS - Tailwind CSS 入門與語法

小弟我之前一直是使用 Bootstrap 做為前端 CSS 框架，由於最近聽到很多 Tailwind CSS 的花式吹捧，讓我也開始感興趣了，今天就一起來研究一...

Ares ‧ 2020-12-30

4 Like 2 留言 14796 瀏覽

鐵人賽 Modern Web DAY 5

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 5 篇

技術 Day 05 安裝 Tailwind CSS

上一篇的範例因為沒有用 CSS 調教過，還不大能見人。本篇將來簡單介紹 Tailwind CSS 這個 Utility-First 的 CSS 框架。 Tai...

Lucas Yang ‧ 2020-09-07

0 Like 0 留言 9788 瀏覽

技術 CSS - Tailwind CSS 阿哩阿雜的設定

上一篇介紹了 Tailwind 基本的語法，而今天要來看的是 Tailwind 的設定，之前說到的許多功能都是靠著這些設定達成，包含變數、模組化、tree-sh...

Ares ‧ 2021-01-04

0 Like 0 留言 6111 瀏覽

技術快速了解 Tailwind CSS 的 JIT 模式

線上範例：JIT 線上範例 - Tailwind Play 因為 Tailwind CSS 的設計原理，在開發時會先幫你產生好超多的 class，CSS 檔...

Lucas Yang ‧ 2021-05-29

0 Like 1 留言 5477 瀏覽

鐵人賽 Modern Web DAY 19

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 19 篇

技術 Day 19 Lightning 分頁功能

在原本 Laravel Blade 裡要使用分頁是非常簡單的，但現在我們前端是 Vue，需要做一(億)些些調整才能使用分頁功能。調整 Laravel 分頁器...

Lucas Yang ‧ 2020-09-21

0 Like 0 留言 5279 瀏覽

鐵人賽 Modern Web DAY 6

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 6 篇

技術 Day 06 Iconify 和 Heroicons

本篇要來講在網頁很常見的元素 icon。常見的 icon 套件包括 Material Design Icons、Font Awesome、Octicon，而且...

Lucas Yang ‧ 2020-09-08

1 Like 0 留言 4928 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day13 - 寬度、高度

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

肉鬆 ‧ 2022-09-26

5 Like 3 留言 4848 瀏覽

鐵人賽自我挑戰組 DAY 30

C# 雞礎觀念系列第 30 篇

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

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

孤獨一隻雞 ‧ 2021-10-01

0 Like 0 留言 4610 瀏覽

鐵人賽 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 留言 4540 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 Day04 - 如何使用 Tailwind CSS？

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

肉鬆 ‧ 2022-09-17

0 Like 0 留言 4376 瀏覽

鐵人賽 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 0 留言 4101 瀏覽

鐵人賽 Modern Web DAY 7

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 7 篇

技術 Day 07 Layout 和組件

只要是同一個網站，就會有同樣的部分，例如導覽列、頁尾、側邊欄等，需要有 Layout 來統一管理整個網頁的佈局。網頁內元素開始多了起來，總不可能一直都要複製...

Lucas Yang ‧ 2020-09-09

0 Like 0 留言 3755 瀏覽

鐵人賽 Modern Web DAY 9

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 9 篇

技術 Day 09 Lightning 用戶登入

調好了用戶 Model，現在可以來做登入/登出了。上篇已經在後端安裝 Laravel UI 有了現成的登入邏輯，但前端就需要做比較多事情...，像用 Tail...

Lucas Yang ‧ 2020-09-11

1 Like 0 留言 3577 瀏覽

技術 [ Vue ] 使用 Vitawind 1.2 來建置 Vite + Tailwind JIT 專案

建立 Vite 專案在你要放置專案的地方執行這個指令來建立 vue 模板的 vite 專案 # npm 6 npm init vite [專案名稱] --te...

搋兔 ‧ 2021-06-29

0 Like 0 留言 3006 瀏覽

鐵人賽 Modern Web DAY 17

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 17 篇

技術 Day 17 配置 Markdown

說到寫文章，易讀易寫的 Markdown 怎麼可以少？本篇就來配置 Markdown 功能到 Lightning。 Markdown 編輯器我們這回要使用一...

Lucas Yang ‧ 2020-09-19

0 Like 1 留言 2808 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Day01 - 什麼是 Tailwind CSS？

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

肉鬆 ‧ 2022-09-14

0 Like 1 留言 2507 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 Day15 - 探索 Flex 的奧妙

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

肉鬆 ‧ 2022-09-28

1 Like 0 留言 2441 瀏覽

技術 Tailwind CSS 中的樣式渲染順序

如果你 tailwind 已經寫一段時間了，相信你有時候也會想把因為 tailwind 語法而變的很長的 class 變短吧，那這時候就要用到的是 tailwi...

搋兔 ‧ 2021-07-06

0 Like 0 留言 2400 瀏覽

鐵人賽 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 留言 2297 瀏覽

鐵人賽 Software Development DAY 13

我獨自開發 - 用 Supabase 打造全端應用系列第 13 篇

技術第十三關 - 支配者之手：Supabase Database API

在前面的文章中，我們學會了如何使用 Supabase CLI 管理專案、建立資料表，以及各種開發工具。今天要介紹的是 Supabase 的核心功能之一：Dat...

william ‧ 2025-09-26

0 Like 0 留言 2279 瀏覽

鐵人賽自我挑戰組 DAY 27

我獨自開發 - Supabase 打造全端應用系列第 27 篇

技術第二十七關 - 來企排隊： Supabase 快速整合 Resend 訂單通知信

今天要利用 Supabase Edge Function 結合 Resend 服務，來寄送客製化的訂單通知信。什麼是 Resend？ Resend 是一個專...

william ‧ 2025-10-10

0 Like 0 留言 2258 瀏覽

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

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

燐火幽冥 ‧ 2022-11-15

0 Like 0 留言 2194 瀏覽

技術 [ React ] 使用 Vitawind 1.2 來建置 Vite + Tailwind JIT 專案

建立 Vite 專案在你要放置專案的地方執行這個指令來建立 react 模板的 vite 專案 # npm 6 npm init vite [專案名稱] --...

搋兔 ‧ 2021-06-29

0 Like 0 留言 2190 瀏覽

鐵人賽 Modern Web DAY 21

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 21 篇

技術 Day 21 Lightning 編輯 & 刪除文章

文章的新增、顯示都有了，馬上來做剩下的修改和刪除吧！編輯文章和刪除文章功能 app/Http/Controllers/Post/PostController...

Lucas Yang ‧ 2020-09-23

0 Like 0 留言 2152 瀏覽

鐵人賽 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 1 留言 2121 瀏覽

鐵人賽自我挑戰組 DAY 8

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

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

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

肉鬆 ‧ 2022-09-21

0 Like 0 留言 2112 瀏覽

鐵人賽 Modern Web DAY 15

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 15 篇

技術 Day 15 Lightning 新增文章

撰寫文章頁面在上篇中，新增 Model 附贈了 Resource Controller，這裡也要新增 Resource 路由： routes/web.php...

Lucas Yang ‧ 2020-09-17

0 Like 0 留言 2097 瀏覽

鐵人賽 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 0 留言 2074 瀏覽

鐵人賽 Modern Web DAY 12

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 12 篇

技術 Day 12 Lightning 編輯個人資料

註冊完帳號後，本篇要來更新資料和上傳大頭照。帳號設定頁面首先先新增 Controller： php artisan make:controller Use...

Lucas Yang ‧ 2020-09-14

0 Like 1 留言 2024 瀏覽

鐵人賽自我挑戰組 DAY 11

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

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

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

肉鬆 ‧ 2022-09-24