Tailwind CSS 初學課程教學

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 2 分鐘

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/



JayLinXR軟體開發
留言
avatar-img
留言分享你的想法！
avatar-img
JayLinXR
13會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
Oren
咖啡控的0元回血實驗：加入蝦皮分潤計畫後，我的1111購物車能回本嗎？
這篇文章是一位咖啡愛好者分享他在雙11前的購物規劃。他不僅推薦了自己喜愛的咖啡豆品牌（如李董、音樂家系列）與手沖器材，還分享了實用的挑豆技巧。同時，他記錄了一項個人實驗：剛加入「蝦皮分潤計畫」，想測試透過分享真心喜愛的商品，是否能為自己的咖啡開銷「回血」。
#蝦皮分潤計畫#蝦皮1111#蝦皮免運
Thumbnail
avatar-avatar
Oren
咖啡控的0元回血實驗：加入蝦皮分潤計畫後，我的1111購物車能回本嗎？
這篇文章是一位咖啡愛好者分享他在雙11前的購物規劃。他不僅推薦了自己喜愛的咖啡豆品牌（如李董、音樂家系列）與手沖器材，還分享了實用的挑豆技巧。同時，他記錄了一項個人實驗：剛加入「蝦皮分潤計畫」，想測試透過分享真心喜愛的商品，是否能為自己的咖啡開銷「回血」。
#蝦皮分潤計畫#蝦皮1111#蝦皮免運
Thumbnail
avatar-avatar
吃喝玩樂皮丹媽媽(๑´ڡ`๑)
完整出國行李清單｜出國旅行必備物品＆蝦皮購物攻略
出國旅行時，準備充分的行李能讓旅程更加輕鬆愉快！本文整理了大人旅行的全方位行李清單，從護照、信用卡到各種旅行好物一應俱全。特別是防盜小物、瞬熱熱水壺和過濾蓮蓬頭等必備單品，讓你的旅行更舒適、安全。此外，還介紹了蝦皮分潤計劃，讓你在購物的同時還能輕鬆賺取分潤，無論是準備行李還是購物分享，都是不錯的選擇
#蝦皮分潤計畫#蝦皮1111#蝦皮免運
Thumbnail
avatar-avatar
吃喝玩樂皮丹媽媽(๑´ڡ`๑)
完整出國行李清單｜出國旅行必備物品＆蝦皮購物攻略
出國旅行時，準備充分的行李能讓旅程更加輕鬆愉快！本文整理了大人旅行的全方位行李清單，從護照、信用卡到各種旅行好物一應俱全。特別是防盜小物、瞬熱熱水壺和過濾蓮蓬頭等必備單品，讓你的旅行更舒適、安全。此外，還介紹了蝦皮分潤計劃，讓你在購物的同時還能輕鬆賺取分潤，無論是準備行李還是購物分享，都是不錯的選擇
#蝦皮分潤計畫#蝦皮1111#蝦皮免運
Thumbnail
avatar-avatar
Andy Tsou的沙龍
[Tailwind CSS] 把我的樣式還來
情境 前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。 為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果 這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式 壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
#TailwindCSS#ShadowDOM#Vue
Thumbnail
avatar-avatar
Andy Tsou的沙龍
[Tailwind CSS] 把我的樣式還來
情境 前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。 為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果 這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式 壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
#TailwindCSS#ShadowDOM#Vue
Thumbnail
avatar-avatar
技術叢林
什麼是Tailwind CSS？輕鬆認識Tailwind CSS
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
#開發#TailwindCSS#CSS
Thumbnail
avatar-avatar
技術叢林
什麼是Tailwind CSS？輕鬆認識Tailwind CSS
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
#開發#TailwindCSS#CSS
Thumbnail
avatar-avatar
JayLinXR
JayLin教你製作DarkMode & LightMode 主題在你的網站上
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
#教學#程式#設計
Thumbnail
avatar-avatar
JayLinXR
JayLin教你製作DarkMode & LightMode 主題在你的網站上
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
#教學#程式#設計
Thumbnail
avatar-avatar
JayLinXR
學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
#教學#學習#程式
Thumbnail
avatar-avatar
JayLinXR
學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
#教學#學習#程式
Thumbnail
avatar-avatar
JayLinXR
Tailwind CSS 初學課程教學
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
#教學#設計#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
Tailwind CSS 初學課程教學
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
#教學#設計#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習Next.js 做一個簡單的作品集(Portfolio)
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
#學習#教學#React
Thumbnail
avatar-avatar
JayLinXR
學習Next.js 做一個簡單的作品集(Portfolio)
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
#學習#教學#React
Thumbnail
avatar-avatar
JayLinXR
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 App
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
#學習#專案#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 App
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
#學習#專案#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
Emma Red的沙龍
用CHATGPT學習前端日記（002）了解Tailwind工具 】20230228
老師請問tailwind是什麼呢？ Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
#tailwind#前端學習#CSS
Thumbnail
avatar-avatar
Emma Red的沙龍
用CHATGPT學習前端日記（002）了解Tailwind工具 】20230228
老師請問tailwind是什麼呢？ Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
#tailwind#前端學習#CSS
Thumbnail
avatar-avatar
Ray C的沙龍
Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
#設計#程式設計#產品設計
Thumbnail
avatar-avatar
Ray C的沙龍
Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
#設計#程式設計#產品設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News