https://blog.zjzhang.org/post/using-tailwindcss-in-vue
如果喜歡我的文章，請幫我拍掌五下喔，你的支持是我創作的動力，感謝
留言
留言分享你的想法！
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。
而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
你可能也想看
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界
所得稅線上申報
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界
所得稅線上申報
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
重點摘要：
6 月繼續維持基準利率不變，強調維持高利率主因為關稅
點陣圖表現略為鷹派，收斂 2026、2027 年降息預期
SEP 連續 2 季下修 GDP、上修通膨預測值
---
1.繼續維持利率不變，強調需要維持高利率是因為關稅：
聯準會 (Fed) 召開 6 月利率會議
重點摘要：
6 月繼續維持基準利率不變，強調維持高利率主因為關稅
點陣圖表現略為鷹派，收斂 2026、2027 年降息預期
SEP 連續 2 季下修 GDP、上修通膨預測值
---
1.繼續維持利率不變，強調需要維持高利率是因為關稅：
聯準會 (Fed) 召開 6 月利率會議
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃
註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃
註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend
擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度
和不需要創建CSS檔案即可以用class去做Styling
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend
擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度
和不需要創建CSS檔案即可以用class去做Styling
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...