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

0 Like 0 留言 2044 瀏覽

鐵人賽 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

1 Like 0 留言 4209 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day13 - 寬度、高度

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

肉鬆 ‧ 2022-09-26

0 Like 0 留言 3974 瀏覽

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

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

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

鐵人賽自我挑戰組 DAY 11

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

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

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

肉鬆 ‧ 2022-09-24

1 Like 1 留言 1313 瀏覽

鐵人賽自我挑戰組 DAY 10

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

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

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

肉鬆 ‧ 2022-09-23

0 Like 1 留言 1731 瀏覽

鐵人賽自我挑戰組 DAY 8

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

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

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

肉鬆 ‧ 2022-09-21

1 Like 1 留言 1397 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術 Day07 - Display 的大小事

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

肉鬆 ‧ 2022-09-20

0 Like 0 留言 1537 瀏覽

鐵人賽自我挑戰組 DAY 6

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

技術 Day06 - 自定義參數

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

肉鬆 ‧ 2022-09-19

0 Like 0 留言 1574 瀏覽

鐵人賽自我挑戰組 DAY 5

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

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

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

肉鬆 ‧ 2022-09-18

0 Like 0 留言 3446 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 Day04 - 如何使用 Tailwind CSS？

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

肉鬆 ‧ 2022-09-17

0 Like 0 留言 1712 瀏覽

鐵人賽自我挑戰組 DAY 3

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

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

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

肉鬆 ‧ 2022-09-16

0 Like 0 留言 1370 瀏覽

鐵人賽自我挑戰組 DAY 2

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

技術 Day02 - Bootstrap 與 Tailwind CSS 差異

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

肉鬆 ‧ 2022-09-15

0 Like 1 留言 2370 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Day01 - 什麼是 Tailwind CSS？

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

肉鬆 ‧ 2022-09-14

5 Like 3 留言 4170 瀏覽

鐵人賽自我挑戰組 DAY 30

C# 雞礎觀念系列第 30 篇

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

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

孤獨一隻雞 ‧ 2021-10-01

0 Like 0 留言 944 瀏覽

鐵人賽 Modern Web DAY 15

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 15 篇

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

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

Moscle.dev ‧ 2021-09-30

0 Like 0 留言 1093 瀏覽

鐵人賽 Modern Web DAY 13

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 13 篇

技術 [Day 13]每天前進一點應該也是進步吧?(前端篇)

挑戰目標: MockNative Camp 今天我們來整理昨天沒有弄好的footer右邊的部分，這是我們的目標昨天完成的今天完成的今天決定另闢蹊徑到uxwi...

Moscle.dev ‧ 2021-09-28

1 Like 0 留言 2097 瀏覽

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

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

搋兔 ‧ 2021-07-06

0 Like 0 留言 1967 瀏覽

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

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

搋兔 ‧ 2021-06-29

1 Like 0 留言 3261 瀏覽

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

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

搋兔 ‧ 2021-06-29

3 Like 2 留言 15870 瀏覽

技術 CSS - Tailwind CSS 入門與語法

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

Ares ‧ 2020-12-30

0 Like 0 留言 8894 瀏覽

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

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

Ares ‧ 2021-01-04

0 Like 0 留言 1497 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 Day 26 Lightning 顯示文章留言 & 刪除留言

文章留言功能的最後一步，來做留言列表和刪除留言，把上篇新增的留言秀出來！文章留言列表先來新增一個留言列表組件： resources/js/Lightnin...

Lucas Yang ‧ 2020-09-28

0 Like 0 留言 1319 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 Day 25 Lightning 新增留言

首先先新增一個輸入留言的組件，裡面會使用之前做的 Markdown 輸入框組件，enabled prop 為 true 時可正常輸入留言，為 false 時禁...

Lucas Yang ‧ 2020-09-27

0 Like 0 留言 5588 瀏覽

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

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

Lucas Yang ‧ 2021-05-29

0 Like 0 留言 1366 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 Day 23 Lightning 喜歡文章功能的問題

在上篇中已經做完了喜歡文章的功能，但還存在一些問題，本篇就來看這些問題。預加載 likers()->count() 問題首先看到的是重複的 Quer...

Lucas Yang ‧ 2020-09-25

0 Like 0 留言 1638 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day 22 Lightning 喜歡文章功能

看到一篇優秀的文章，總是會給它按個讚，也可以從點讚次數來了解這篇文章的受歡迎程度。本篇就來實作這個功能，不過我會叫它「喜歡文章」嘻！喜歡功能不要重複造輪子...

Lucas Yang ‧ 2020-09-24

0 Like 0 留言 1964 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

Lucas Yang ‧ 2020-09-23

1 Like 0 留言 1412 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day 20 Lightning 完善文章列表 & 優化資料庫查詢

列表組件已經完成，再來可以做用戶頁面的文章列表了。用戶頁面的文章列表首先先修改用戶頁面的 Controller 部分，因為之後這個頁面還要放用戶喜歡的文章...

Lucas Yang ‧ 2020-09-22

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