Tailwind CSS 初學課程教學
閱讀時間約 1 分鐘
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend
為什麼學TailwildCSS?
擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度和不需要創建CSS檔案即可以用class去做Styling
學習TailwildCSS需要準備哪些?
- CSS3基礎更能快速上手
舉例: width: 100% 現在只要w-full就可以了
前期需要耐心去熟悉這些簡約的用法
JayLin希望透過基礎介紹和案例教大家如何用TailwildCSS
Part 1 - 初步介紹和安裝c
這次教大家Tailwind CSS 安裝和簡約介紹
Part 2 - Tailwind CSS 響應式 Responsive 設計介紹
響應式設計(Responsive Web Design)用法在Tailwind 裡面
Part 3 - 客製化和background-image背景圖
今天分享如何在Tailwind CSS客製化以及置入背景圖案(background Image)
總結
- Tailwind CSS已成為主流技術，你可以在Next.js 創立專案時候看到:)
- React也推薦使用Next.js 去創立App，所以Tailwind CSS 我相信會越來越熱門
更多相關教學文章持續更新，請別忘記追蹤呦
JayLinXR YT: https://www.youtube.com/@jaylinxr
JayLinXR IG: https://www.instagram.com/jaylin_xr/
為什麼會看到廣告
12會員
32內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
CAN I USE
解決方法
加入 SCSS 或是 CSS
在 SCSS 檔案中加入以下這段 Code
$max:20;
@for $i from 1 through $max {
body.below-safari14 {
.flex-row {
&.flex-n
介紹 Tailwind CSS 工具並提供如何使用的方法
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。
Installation - Tailwind CSS
主要的方式有CLI跟CDN，這裡使用的方式前者。
Install Tailwind CSS
npm install -D tailwindcss
npx tai
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
CAN I USE
解決方法
加入 SCSS 或是 CSS
在 SCSS 檔案中加入以下這段 Code
$max:20;
@for $i from 1 through $max {
body.below-safari14 {
.flex-row {
&.flex-n
介紹 Tailwind CSS 工具並提供如何使用的方法
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。
Installation - Tailwind CSS
主要的方式有CLI跟CDN，這裡使用的方式前者。
Install Tailwind CSS
npm install -D tailwindcss
npx tai
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code: