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

3 Like 2 留言 13454 瀏覽

技術 CSS - Tailwind CSS 入門與語法

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

Ares ‧ 2020-12-30

4 Like 2 留言 13213 瀏覽

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

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

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

Ares ‧ 2021-01-04

0 Like 0 留言 4802 瀏覽

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

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

Lucas Yang ‧ 2021-05-29

0 Like 1 留言 4269 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day 19 Lightning 分頁功能

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

Lucas Yang ‧ 2020-09-21

0 Like 0 留言 4212 瀏覽

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

0 Like 0 留言 3278 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day 07 Layout 和組件

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

Lucas Yang ‧ 2020-09-09

0 Like 0 留言 3180 瀏覽

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

鐵人賽 Modern Web DAY 9

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

技術 Day 09 Lightning 用戶登入

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

Lucas Yang ‧ 2020-09-11

0 Like 0 留言 3117 瀏覽

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

1 Like 0 留言 3006 瀏覽

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

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

搋兔 ‧ 2021-06-29

5 Like 3 留言 2844 瀏覽

鐵人賽自我挑戰組 DAY 30

C# 雞礎觀念系列第 30 篇

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

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

孤獨一隻雞 ‧ 2021-10-01

1 Like 0 留言 2338 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day13 - 寬度、高度

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

肉鬆 ‧ 2022-09-26

0 Like 0 留言 1934 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 Day04 - 如何使用 Tailwind CSS？

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

肉鬆 ‧ 2022-09-17

0 Like 0 留言 1862 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day 17 配置 Markdown

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

Lucas Yang ‧ 2020-09-19

0 Like 0 留言 1700 瀏覽

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

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

搋兔 ‧ 2021-06-29

0 Like 0 留言 1628 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day 12 Lightning 編輯個人資料

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

Lucas Yang ‧ 2020-09-14

0 Like 0 留言 1604 瀏覽

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

鐵人賽 Modern Web DAY 15

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

技術 Day 15 Lightning 新增文章

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

Lucas Yang ‧ 2020-09-17

1 Like 0 留言 1569 瀏覽

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

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

搋兔 ‧ 2021-07-06

1 Like 0 留言 1503 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 Day 11 Lightning 用戶註冊

註冊基本上和登入差不多，我們要做的註冊頁面裡也只需要增加一點欄位。註冊頁面跟登入一樣，到 RegisterController 中替換掉註冊頁面： app...

Lucas Yang ‧ 2020-09-13

0 Like 0 留言 1496 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

Lucas Yang ‧ 2020-09-23

0 Like 1 留言 1426 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 Day01 - 什麼是 Tailwind CSS？

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

肉鬆 ‧ 2022-09-14

0 Like 0 留言 1367 瀏覽

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

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

燐火幽冥 ‧ 2022-11-15

0 Like 0 留言 1291 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day 22 Lightning 喜歡文章功能

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

Lucas Yang ‧ 2020-09-24

0 Like 0 留言 1273 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

Lucas Yang ‧ 2020-09-28

0 Like 1 留言 1251 瀏覽

鐵人賽自我挑戰組 DAY 8

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

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

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

肉鬆 ‧ 2022-09-21

0 Like 1 留言 1240 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 Day15 - 探索 Flex 的奧妙

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

肉鬆 ‧ 2022-09-28

1 Like 0 留言 1221 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

Lucas Yang ‧ 2020-09-22

0 Like 0 留言 1185 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day 13 Lightning 刪除帳號 & 用戶頁面

接續上篇，做刪除帳號和用戶頁面，一口氣完成用戶的功能！刪除帳號新增刪除帳號的路由： routes/web.php // User ... Route::d...

Lucas Yang ‧ 2020-09-15