Tailwind CSS快速上手 Tailwind CSS的安裝、配置、使用

📚前言

在Web前端開發的歷史長河中，CSS的編寫方式經歷了多次演進，從早期的原生CSS 到 CSS預處理(Less/Sass/Stylus) 到 CSS-in-JS(Styled-Components/Emotion) 再到 Utility-First 原子化CSS。每一種演進方案其本質都是圍繞“開發效率”、“運行性能”、”可維護性“ 這三個核心點之間尋找最佳平衡而衍生出各類CSS庫/框架/引擎。

在這里插入圖片描述

🍀原生CSS&CSS預處理（Less / Sass / Stylus）

開發人員手動編寫.css文件 、.less文件等，然后通過<link>標簽 或 @import引入使用

存在問題： 當隨著項目變大，很快就會面臨命名沖突、代碼冗余、缺乏邏輯組織、難以維護等
解決方案：
- CSS命名規范(BEM)：CSS-BEM 命名規范通過嚴格的命名約定來約束作用域，增強代碼的可讀性和可維護性，是一種用于CSS模塊化開發的命名約定規范，但它依賴于開發人員的自覺性，且class類名很長。
- CSS預處理(Less / Sass / Stylus)： 引入了變量、嵌套、混入、繼承等編程概念，雖然增強了CSS的組織性和可復用性，但是并未從根本上解決命名他全局污染的問題。

🍀CSS-in-JS（Styled-Components / Emotion)）

CSS-IN-JS這種解決方案，它提倡我們把CSS代碼寫在JavaScript代碼當中，在React JSX/TSX等類似的組件化框架興起后，也將CSS樣式視為組件的一部分。

核心： styled-components、Emotion 將CSS樣式直接寫在JavaScript文件中，為每個組件生成唯一的、帶哈希值的類名，從而實現“作用域化樣式”，徹底避免了全局污染的問題。
優勢：
- 組件化： 樣式與邏輯類聚，方便復用和維護。
- 動態樣式： 可以方便的基于組件的state 或 props來動態改變樣式。
問題：
- 心智負擔： 要在JavaScript 和 CSS 之間來回的切換語法，而且需要一定的學習成本去學習特定庫的API。
- 運行開銷： CSS樣式不是提前生成的，而是在運行時解析JavaScript并動態生成CSS，所帶來一定的性能損耗。

🍀Utility-First CSS(Tailwind CSS / UnoCSS)

Utility-First(功能優先)原子化CSS 是一種與傳統“語義化CSS”截然不同的思路，它提供了一系列高度可組合的、功能單一的“原子類”(Atomic CSS / Utility Classes)。

核心： 開發人員無需再為組件編寫專門的CSS類，而是直接在HTML中組合這些原則來構建樣式。

<!-- 傳統寫法：-->
<style>.btn-primary{padding: 8px 16px;color: white;border-radius: 4px;background-color: blue;}
</style>
<button class="btn-primary">提交</button><!-- 原子化CSS：-->
<button class="py-2 px-4 text-white rounded bg-blue-500">提交</button>

優勢：
- 無需思考命名：從根本上消除了為class命名的煩惱。
- 無需切換文件：樣式和結構在一起，開發人員心流不被打斷。
- 約束與一致性：所有樣式都來自預設的design tokens(在tailwind.config.js文件中定義)，保證了整個項目在視覺上的一致性。
- 性能佳體積小：通過類似PurgeCSS等工具，在構建項目時自動分析掃描，首先它將 CSS 文件中使用的選擇器與內容文件中的選擇器進行匹配，然后它會從 CSS 中刪除未使用的選擇器，從而生成更小的 CSS 文件。

🏡Tailwind CSS簡介

Tailwind CSS 官網 https://tailwindcss.com

在這里插入圖片描述

Tailwind CSS 是一個實用優先的 CSS 框架，與傳統的框架（如 Bootstrap、Foundation）不同，它沒有預定義的組件，而是提供了一系列原子化的 CSS 類，允許你直接在 HTML 中應用樣式。

Tailwind CSS 是一個工具優先的框架，意味著它提供了大量的預定義類，而不是預設的組件,這使得開發者可以構建幾乎任何設計，而不需要編寫 CSS。

簡而言之，只需要知道類名以及對應的屬性和值范圍就OK了！

📊Vue3 項目實例

為了便于項目演示，這里就以常用的 Vite + Vue3 + TypeScript + Tailwind CSS 4 為項目實例，從項目的安裝、初始化配置等流程逐一說明。

1、創建項目

# 構建Vue項目
bun create vue@latest# 輸入項目名，這里以tailwind-css-demo為例
tailwind-css-demo# 進入tailwind-css-demo項目根目錄
cd tailwind-css-demo

2、安裝依賴

# 安裝vite項目依賴
bun install# 安裝Tailwind CSS引擎依賴 和@tailwindcss/vite插件
bun add -D tailwindcss @tailwindcss/vite

3、配置 vite.config.ts

Tailwind CSS 4.x最大的變化就是 “零配置” 優先，無需再配置tailwind.config.js 和 postcss.config.js 文件，所有配置都可以直接在vite.config.ts中完成。

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'// 引入@tailwindcss/vite插件，在編譯時自動將class類名對應的樣式提取出來添加到style標簽中
import tailwindcss from '@tailwindcss/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueJsx(),vueDevTools(),tailwindcss(),  // 注入tailwindcss插件],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},server: {// host: '0.0.0.0',// port: 8080,open: true,cors: true,},
})

4、Tailwind CSS IntelliSense 擴展

在代碼編輯器中，例如：常見的 Visual Studio Code 、Cursor AI Code Editor 、Trae - IDE 等編輯器，在擴展管理中搜索：Tailwind CSS IntelliSense 關鍵字，直接安裝即可，Tailwind CSS IntelliSense - Visual Studio Marketplace，安裝成功后，在HTML中編寫class原子類時就會自動輔助提示，以便高效的開發。

Tailwind CSS IntelliSense

具體了解更多擴展配置說明https://tailwindcss.com/docs/editor-setup

5、引入tailwindcss

在前端項目工程src目錄中的全局的style.css 或 main.css 樣式文件中引入 tailwindcss 核心庫

<!-- https://tailwindcss.com/docs/preflight -->
@import "tailwindcss";

6、使用Tailwind CSS

完成以上步驟以后，就可以在項目任意HTML標簽中的class屬性中添加原子類了，同時還支持響應試設計：sm，md， lg，xs、xl等，例如w-lg表示在中等屏幕，以及懸停偽類、偽元素、焦點和其他狀態Hover, focus, and other states等等，都可以通過不同的修飾符，快速得到對應狀態樣式。

使用實用程序類（Utility Classes）進行樣式設置

這是Tailwind的基石，每一個類名都代表一個單一、不可再分的CSS樣式屬性，例如，以下是常用的Tailwind CSS 原子類與原生CSS樣式屬性對照情況。

🚀查看更多Tailwind CSS 原子類、🛠?線在嘗試體驗 Tailwind Play

Tailwind CSS 原子類	原生CSS樣式屬性
`flex`、`grid`	`display: flex;`、`display: grid;`
`justify-center`、`items-center`	`justify-content: center;`、`align-items: center;`
`box-border`	`box-sizing: border-box;`
`float-left`	`float: left;`
`absolute`、`relative`	`position: absolute;`、`position: relative;`
`w-px`、`w-[50px]`、`w-full`	`width: 1px;`、`width: 50px;`、`width: 100%;`
`text-xs`	`font-size: 0.75rem(12px) ;`
`text-<size>/<number>`	`font-size: <size>;`
`text-center`	`text-align: center;`
`text-white`	`color: #fff;`
`font-bold`	`font-weight: 700;`
`bg-white`	`background-color: #000;`
`bg-red-500`	`background-color: #fb2c36;`
`shadow-2xs`	`box-shadow: 0 1px rgb(0 0 0 / 0.05);`
`text-shadow-xs`	`text-shadow: 0px 1px 1px rgb(0 0 0 / 0.2);`
`rounded-xs`	`border-radius: 0.125rem (2px);`
`cursor-pointer`	`cursor: pointer;`

顏色（Colors）

Tailwind CSS 定義了一系列符合大眾UI的色階，可根據自己需要選擇使用，當然如果在不滿足你的需求時可以在方括號中，如text-[#000] 來自定義任意色值。

🚀Tailwind CSS 色值體系

<body><div class="text-red-500 bg-blue-500">紅色文字, 藍色背景</div><div class="text-[#000] bg-[#fff]">自定義：黑色文字，白色背景</div>
</body>

在這里插入圖片描述

7、自定義Tailwind CSS原子類

@layer 自定義原子類，如果在Tailwind CSS中，原有的原子類不能滿足需求時，可在全局style.css 或 main.css 樣式文件中通過使用@layer{...}來添加自定義的原子類。

@import "tailwindcss";:root {--color-primary: #409eff;--color-primary-hover: #155dfc;--color-success: #67c23a;--color-success-hover: #4c8b2f;
}@layer {.item {position: relative;&::after {content: '';display: inline-block;position: relative;top: 1px;width: 18px;height: 12px;background: url('@/assets/img/not.webp') no-repeat center center;background-size: contain !important;}}.item_active {b::after {background: url('@/assets/img/yes.webp') no-repeat center center;}}.type_primary {border: 2px solid var(--color-primary);background-color: var(--color-primary-hover);}.type_success {color: var(--color-success);background-color: var(--color-success-hover);}
}

<body><ul class="m-5 p-2"><li class="mb-10 item"><span class="p-2 type_primary">primary</span><span class="p-2 type_success">success</span></li></ul>
</body>

@theme 主題、變量定義，在自定義CSS中，自定義設計令牌，如：顏色值，寬高、間距等，可通過@theme{...}來定義（類似原生CSS中的:root{...}），以保證項目整體樣式的一致性。

@import "tailwindcss";@theme {--mu-primary: #409eff;--mu-primary-hover: #155dfc;--mu-success: #67c23a;--mu-success-hover: #4c8b2f;--mu-warning: #e6a23c;--mu-warning-hover: #c88b2f;--mu-danger: #f56c6c;--mu-danger-hover: #d33f3f;--mu-info: #909399;--mu-info-hover: #7c7c7c;
}

@apply 組合現有工具類，如果有一些原子類經常被反復的使用時，就可以通過@apply{...}將它們組合成一個新的原子類，在使用時，只需使用那個新的原子類名即可！

@import "tailwindcss";.btn-primary {@apply px-5 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-600 hover:cursor-pointer;
}

<body><button class="px-5 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-600 hover:cursor-pointer">反復使用時</button><!-- 調用新的組合原子類名 --><button class="btn-primary">組合使用后</button>
</body>

@utility 創建動態工具類，這是Tailwind CSS 4 新增的強大功能，它可以創建全新的、可被修飾的、組合式工具類，通過@utility 類名-*{...} 來動態匹配對應的樣式類，其中 * 表示動態變化的樣式類。

@import "tailwindcss";@theme {--mu-primary: #409eff;--mu-primary-hover: #155dfc;--mu-primary-dark: #fff;--mu-primary-hover-dark: #409eff;--mu-success: #67c23a;--mu-success-hover: #4c8b2f;--mu-success-dark: #fff;--mu-success-hover-dark: #67c23a;--mu-warning: #e6a23c;--mu-warning-hover: #c88b2f;--mu-danger: #f56c6c;--mu-danger-hover: #d33f3f;--mu-info: #909399;--mu-info-hover: #7c7c7c;
}@utility btn-* {@apply px-5 py-2 rounded-md text-white hover:cursor-pointer;background-color: --value(--mu-*);&:hover {background-color: --value(--mu-*-hover);}<!-- 暗色主題時的顏色 -->@variant dark {@apply text-black;background-color: --value(--mu-*-dark);&:hover {background-color: --value(--mu-*-hover-dark);}}
}

<body><button class="btn-primary">主要樣式顏色</button><button class="btn-success">成功樣式顏色</button><button class="btn-warning">警告樣式顏色</button>
</body>

8、擴展

除了 Tailwind CSS 功能優先的原子化 CSS 框架原子類以外，其他還有類似的原子化 CSS引擎，如：Uno CSS 即時按需的原子化 CSS 引擎，它不會預先生成任何 CSS，而是根據你在代碼中實際使用的類名，動態地、即時地生成對應的 CSS 規則。

Tailwind CSS：目前依然是一個功能強大、可靠且值得信賴的選擇，它定義了 Utility-First 的最佳實踐。

Uno CSS 將是CSS工具未來的演進方向。它以更智能、更高效的方式解決了同樣的問題，進一步提升了性能和靈活性。

最后、無論是原子化CSS框架，還是原子化CSS引擎，都會給你帶來不樣的開發體驗，都可以去嘗試用一下。