什麼是Tailwind CSS?輕鬆認識Tailwind CSS

更新於 發佈於 閱讀時間約 2 分鐘

本篇是Tailwind CSS系列文章的第一篇,就用輕鬆的閒聊方式來認識一下Tailwind CSS,讓你知道它的魅力所在。

嗨歡迎閱讀我的文章,這系列的主題是Tailwind CSS,內容涵蓋基礎設定到各種客製化應用。
系列文需要有一定的CSS,HTML基礎認識。
什麼是Tailwind CSS?輕鬆認識Tailwind CSS封面圖片

什麼是Tailwind CSS?輕鬆認識Tailwind CSS封面圖片

一分鐘認識Tailwind CSS

Tailwind CSS是一種「Utility-First」的CSS設計模式,提供非常多預先定義好的class給開發者使用,直接加在HTML上就能直接使用,協助開發者更快的開發現代化網站。

Tailwind CSS官網

Tailwind CSS官網

和一般使用的class不一樣的地方,Tailwind CSS把每一個class的顆粒度切到最小,一個class就僅代表一個CSS樣式,例如想在要呈現一個背景漸層色,在Tailwind CSS中就要撰寫以下內容:

漸層底色

漸層底色

<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

這段呈現了Tailwind CSS最大的優勢,提供開發者最好的開發體驗。所有CSS都已經預先產出,開發者只需要提取需要的部分,大大簡化開發過程,更能專注於開發客製化樣式設計上。

另一大優點就是輕量化,Tailwind CSS在打包的時候會自動移除未使用的class,對於網頁的載入速度和效能有很大的幫助,也因為class的顆粒度小,複用性大大提升。

Tailwind CSS痛點?

Tailwind CSS的優點和痛點都顯而易見。

最常被提起的點莫過於在HTML內被寫滿長長的class,讓HTML看起來變得複雜;而另一個點則是覺得預設的斷點並不完全符合需求,無法深度自定義。

隨著版本的更新,官方也針對這些開發者痛點不斷地推出插件和魔術般的Utility,所以Tailwind CSS在前端越來越熱門自然是有它的原因在。

系列文章規劃

預計這個系列會集中在介紹Tailwind CSS的開發環境設定、必須安裝的插件介紹、深入介紹如何在Tailwind CSS中使用CSS變數、介紹一些魔術般的Utility等等內容。

avatar-img
6會員
23內容數
沙龍新手
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Tailwind CSS 是近年熱門流的CSS 樣式工具套件。class名稱簡單易理解是他的最大特色之一,在設計上不易被其他前端框架套件拘束。是一個入門門檻低的前端樣式好用工具。 這裡介紹用簡單步驟,將Tailwind CSS加入vue專案中
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
data-* attributes 是 HTML 內建的屬性,可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能,讓樣式設定可以更動態多變。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Tailwind CSS 是近年熱門流的CSS 樣式工具套件。class名稱簡單易理解是他的最大特色之一,在設計上不易被其他前端框架套件拘束。是一個入門門檻低的前端樣式好用工具。 這裡介紹用簡單步驟,將Tailwind CSS加入vue專案中
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
data-* attributes 是 HTML 內建的屬性,可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能,讓樣式設定可以更動態多變。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。