Tailwind CSS 的評估與介紹,使用Vue專案該如何建立?教學分享篇

閱讀時間約 4 分鐘

如果你正在尋找管理專案CSS的工具,可以考慮Tailwind CSS,以下列出使用的優缺點,給各位工程師評估,若你只是想要了解Tailwind CSS是什麼,本篇介紹也可以讓你快速理解。

Tailwind CSS 評估

優點

  • 根據網站提供的Componets確實可以快速產生有質感的Layout
  • 若熟悉CSS語法,相較學習成本比較低,只要在Class寫上Tailwind規範的Class即可享有同樣的樣式
  • 可以有效控制屬性,基本上都直接使用不會有太多自定義的情況
  • 商業後台,有系統性的專案非常適合

缺點

  • Class過長,造成Code凌亂,修改須注意複寫
  • 好看的模板要課金,無法直接使用
  • Model用法偏原始需要自己寫,相較其他 UI Framework已經處理好了
  • 客端專案,太多彈性和客製的專案不適合

如何使用 Tailwind CSS

Step1:下載

npm install -D tailwindcss
npx tailwindcss init -p

下載完成後可在專案內看到 tailwind.config.js

Step2:設置作用域

At tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./public/**/*.html",
"./src/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

這樣設定是表示在每個vue檔案都可以直接使用Tailwind CSS

Step3:載入資源

At src\css\tailwindcss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

沒有特別不需要什麼或需要什麼的話,按照這個預設即可

Step4:下載依賴的環境

npm install -D postcss

如果你的專案已經有 postcss 可略過 install 的步驟

At postcss.config.js 確認支援 Tailwind CSS

module.exports = {
plugins: {
tailwindcss:{}, // 加上這行
autoprefixer:{},
}
}

Step5:測試是否成功

 <div class="z-10 overflow-hidden border-b flex justify-center fixed top-0 left-0 right-0 bg-white">
<router-link to="/" class="font-medium text-gray-500 hover:text-gray-900 px-2 py-2">Lesson</router-link>
<router-link to="/cart" class="font-medium text-gray-500 hover:text-gray-900 px-2 py-2">Cart</router-link>
</div>

在你的vue檔案貼上這一段後可看到一個簡單的導覽列的樣式(如下圖)

raw-image

如果有出現代表成功了,你也可以多試試看他提供的組件試著組出你需要的Layout,若你有遇到任何問題,也可以留言問我,如果我有看到會回覆的:)

其他參考

基本上背景、文字大小顏色、間距和排版都可以完成,若想要快速完成版面確實是不錯的工具,但是考量到專案性質不見得每個專案都適合使用,就讓各位工程師們評估和嘗試囉!

開發之路有你有我有卡比,收錄各種開發的技術分享與疑難雜症解★☆
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
data-* attributes 是 HTML 內建的屬性,可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能,讓樣式設定可以更動態多變。
Thumbnail
情境 前陣子使用 Tailwind CSS 開發的正舒服時,遇到一個常見的需求。 為了營運方便,網頁常常會留一個區域給客戶使用,客戶可以編輯 HTML 來達到想要的效果 這樣的好處是,客戶可以馬上應對業務需要,IT也不用重新佈署程式 壞處是要考量資安,不過都是內部來源,出、入口增加檢核,好好
Thumbnail
CAN I USE 解決方法 加入 SCSS 或是 CSS 在 SCSS 檔案中加入以下這段 Code $max:20; @for $i from 1 through $max { body.below-safari14 { .flex-row { &.flex-n
Thumbnail
本篇是Tailwind CSS系列文章的第一篇,就用輕鬆的閒聊方式來認識一下Tailwind CSS,讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式,提供非常多預先定義好的class給開發者使用,直接加在HTML上就能直接使用,協助開發者更快的開發
Thumbnail
提起网页剪藏,很多人首先会想起印象笔记剪藏。如今,你在谷歌等浏览器商店搜索剪藏,便会发现 OneNote、Google Keep 等多种网页剪藏插件。 对于很多用户而言,与其寄希望于在线服务,更喜欢将网页内容永久保存至自己的笔记应用之中。 简悦 简悦官网 简悦资源 简悦官网 插件教程
Thumbnail
如何在白板工具和代码绘制流程图? 关于如何在 FlowUs 这样的效率工具中如何使用流程图的话题,上次我们在文章中推荐了 ProcessOn 和 Draw.io 这两款工具。具体可以阅读原文。 除了专门的流程图工具,还有其他解决方案吗? 使用白板工具绘制流程图或者思维导图。 使用代码绘制流程图
Thumbnail
这次 Figma 制裁大疆事件,让不少从业人员认识到了数据安全的重要性。 注释:本文方法对于 FlowUs 、Notion 等笔记软件均通用。本文以 FlowUs 为例。 📷 📷 📷 📷 那么,设计协作和文档协作有无相互整合的可能性? 📷 📷 FlowUs 官网 FlowUs 知乎主页
Thumbnail
神奇的卡片盒笔记写作法? 随着以 Roam Research 为代表的双链笔记的崛起,自从 2020 年以来,尼克拉斯·卢曼教授的传奇故事,以及卡片盒笔记法的神奇之处日益被广大效率工具爱好者所熟知。这股风潮有两个表现: 卡片盒笔记写作法实践 使用 Block 实现对纸质卡片的拟态 介绍 核心功能
Thumbnail
在面對通膨與升息的議題中,我們都該審慎檢視自己的持股,那些是可以抵禦美元的升息循環,所帶來的割韭菜效應,哪些是可以抵禦通膨巨獸的保值資產;你聽過買房保值的傳統觀念,你知道Iphone的5G手機,但你知道承載這些5G數據的IDC企業(比如:投資DLR),可能會是你穩定的被動收入來源之一嗎?
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
data-* attributes 是 HTML 內建的屬性,可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能,讓樣式設定可以更動態多變。
Thumbnail
情境 前陣子使用 Tailwind CSS 開發的正舒服時,遇到一個常見的需求。 為了營運方便,網頁常常會留一個區域給客戶使用,客戶可以編輯 HTML 來達到想要的效果 這樣的好處是,客戶可以馬上應對業務需要,IT也不用重新佈署程式 壞處是要考量資安,不過都是內部來源,出、入口增加檢核,好好
Thumbnail
CAN I USE 解決方法 加入 SCSS 或是 CSS 在 SCSS 檔案中加入以下這段 Code $max:20; @for $i from 1 through $max { body.below-safari14 { .flex-row { &.flex-n
Thumbnail
本篇是Tailwind CSS系列文章的第一篇,就用輕鬆的閒聊方式來認識一下Tailwind CSS,讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式,提供非常多預先定義好的class給開發者使用,直接加在HTML上就能直接使用,協助開發者更快的開發
Thumbnail
提起网页剪藏,很多人首先会想起印象笔记剪藏。如今,你在谷歌等浏览器商店搜索剪藏,便会发现 OneNote、Google Keep 等多种网页剪藏插件。 对于很多用户而言,与其寄希望于在线服务,更喜欢将网页内容永久保存至自己的笔记应用之中。 简悦 简悦官网 简悦资源 简悦官网 插件教程
Thumbnail
如何在白板工具和代码绘制流程图? 关于如何在 FlowUs 这样的效率工具中如何使用流程图的话题,上次我们在文章中推荐了 ProcessOn 和 Draw.io 这两款工具。具体可以阅读原文。 除了专门的流程图工具,还有其他解决方案吗? 使用白板工具绘制流程图或者思维导图。 使用代码绘制流程图
Thumbnail
这次 Figma 制裁大疆事件,让不少从业人员认识到了数据安全的重要性。 注释:本文方法对于 FlowUs 、Notion 等笔记软件均通用。本文以 FlowUs 为例。 📷 📷 📷 📷 那么,设计协作和文档协作有无相互整合的可能性? 📷 📷 FlowUs 官网 FlowUs 知乎主页
Thumbnail
神奇的卡片盒笔记写作法? 随着以 Roam Research 为代表的双链笔记的崛起,自从 2020 年以来,尼克拉斯·卢曼教授的传奇故事,以及卡片盒笔记法的神奇之处日益被广大效率工具爱好者所熟知。这股风潮有两个表现: 卡片盒笔记写作法实践 使用 Block 实现对纸质卡片的拟态 介绍 核心功能
Thumbnail
在面對通膨與升息的議題中,我們都該審慎檢視自己的持股,那些是可以抵禦美元的升息循環,所帶來的割韭菜效應,哪些是可以抵禦通膨巨獸的保值資產;你聽過買房保值的傳統觀念,你知道Iphone的5G手機,但你知道承載這些5G數據的IDC企業(比如:投資DLR),可能會是你穩定的被動收入來源之一嗎?