Tailwind CSS 中文網
Tailwind Play

入門

安裝

三種使用方式：

1. cli
2. 結合 postcss
3. cdn

cli 方式就和命令行使用 scss、tsc 這些工具一樣，需要手動執行監聽文件改變的命令，實時編譯。這種方式只適合做 demo 時的簡單使用。

想要正兒八經的使用，比如和構建工具結合，就要搭配 postcss 一起使用。

pnpm install -D tailwindcss postcss autoprefixerpnpm tailwindcss init --postcss

tailwindcss 初始化后會生成 postcss 和 tailwindcss 的配置文件。
然后在 tailwindcss.config.js 的 content 選項中配置需要編譯的模版文件路徑。

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

將指令添加到主 css 文件：

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

此時會出現 css 無法識別 tailwind 指令的問題。

解決辦法：
解決 vscode Unknown at rule @xxx 的警告

IDE 設置

vscode 安裝 tailwind 插件可以獲得提示和高亮。并且官方提供了一個 Prettier 插件，它會自動按照官方推薦的類順序對你寫的類進行排序。

pnpm add -D prettier prettier-plugin-tailwindcss

{"plugins": ["prettier-plugin-tailwindcss"]
}

注意：項目中聲明了 prettier 的配置文件的，那 vscode settings.json 中的 prettier 配置就會被覆蓋。
所以項目中的配置文件除了聲明使用 prettier-plugin-tailwindcss 插件外，還要補充其他額外的配置。除非你起初使用的 prettier 配置就是 prettier 默認的配置。

另外配置文件可能出現 json schema 驗證失敗的問題。
解決"無法從“https://json.schemastore.org/xxx”加載架構"的問題

使用預編譯器

由于 Tailwind 是一個 PostCSS 插件，沒有什么能阻止你將它與 Sass、Less、Stylus 或其他預處理器一起使用。

雖然可以，但非常不建議和預編譯器一起使用。

當需要使用某些預編譯器的功能時，你應該高度考慮依賴其他 PostCSS 插件來添加你使用的預處理器功能，而不是使用單獨的 預處理器。

• postcss 插件列表：postcss/docs/plugins.md at main · postcss/postcss

預編譯器最常見的幾個功能：

1. css 拆分成多個文件導入
2. 選擇器嵌套
3. 變量
4. 瀏覽器前綴

這 4 個功能對應的 postcss 解決方案：

1. postcss 插件：postcss-import
   1. 安裝使用。
2. 官方基于 postcss-nested（默認） 或 postcss-nesting 封裝的插件：tailwindcss/nesting
   1. 已經內置，可直接使用，并且可配置應用哪個postcss-nesting 插件。不過需要安裝使用。
   2. 如果使用了 postcss 預設： postcss-preset-env。則要手動關掉預設中的嵌套功能，讓官方的嵌套插件生效。
3. 直接使用 css 變量
4. postcss 插件：autoprefixer
   1. 安裝使用，并且添加在插件末尾使用。其實 init 時，已經添加在末尾。

postcss-import 它嚴格遵守 CSS 規范， @import 語句必須在第一行使用。

這個問題容易在兩個地方忽視：一是和常規 CSS 寫在一起時，二是和 tailwind 主 css 文件寫在一起時。
無論是 .box {} 這樣的常規 CSS 還是 @tailwind 指令，@import 都必須寫在第一行。

為了解決這個容易忽視的問題，最好的辦法就是拆成單獨文件寫。

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {padding: theme('spacing.4') theme('spacing.2');/* ... */
}

使用 postcss-nesting 作為嵌套實現，并關閉 postcss 預設插件中的嵌套功能：

// postcss.config.js
module.exports = {plugins: {'postcss-import': {},'tailwindcss/nesting': 'postcss-nesting',tailwindcss: {},'postcss-preset-env': {features: { 'nesting-rules': false },},}
}

總結 postcss 配置：

pnpm add -D postcss-importpnpm add -D autoprefixer

export default {plugins: {"postcss-import": {},"tailwindcss/nesting": {},tailwindcss: {},autoprefixer: {}}
};

硬要和預編譯器一起使用，具體參考文檔。

生產環境優化

對于盡可能小的生產構建，我們建議使用 cssnano 等工具縮小 CSS，并使用 Brotli 壓縮 CSS。

如果你使用的是 Tailwind CLI，則可以通過添加 --minify 標志來縮小 CSS：

npx tailwindcss -o build.css --minify

如果你已將 Tailwind 安裝為 PostCSS 插件，請將 cssnano 添加到插件列表的末尾：

module.exports = {plugins: {tailwindcss: {},autoprefixer: {},...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})}
}

如果你使用的是框架，請查看文檔，因為這通常會在生產中自動為你處理，你甚至不需要對其進行配置。

基礎概念

分層

首先我們要明白，tailwind 能通過類的方式來寫樣式，是因為它已經提供了這些寫好了 css 的類。并且 tailwind 把這些類分成了三層。

Tailwind 將其生成的樣式組織成三個不同的 “layers” — 這是 ITCSS 推廣的概念。

• base 層用于重置規則或應用于純 HTML 元素的默認樣式。
• components 層用于你希望能夠使用工具覆蓋的基于類的樣式。
• utilities 層用于小型、單一用途的類，這些類應始終優先于任何其他樣式。

ITCSS（Inverted Triangle CSS）是一種CSS架構方法，它通過將CSS代碼組織成一系列層次來提高CSS的可維護性和可擴展性。這些層次從寬泛的、全局的設置到非常具體、局部的樣式，形成一個倒三角形的結構。

每一層都有其明確的職責，如下：

1. Settings：包含設計中的變量，如顏色、字體和斷點。
2. Tools：包含輔助函數、混合宏和實用工具類。
3. Generic：包含重置、標準化樣式和排版規則。
4. Base：包含元素的樣式，如按鈕、表單和網格系統。
5. Objects：包含設計中的布局模式，如媒體對象和列表。
6. Components：包含更復雜的功能模塊，如按鈕組、輪播和導航。
7. Utilities：包含最具體的設計調整，如間距、文本樣式和可見性。

ITCSS的目標是通過限制CSS的特異性、減少依賴性、避免重疊和沖突，以及提供清晰的代碼組織結構，來創建一個易于管理和擴展的CSS代碼庫。這種方法特別適合大型項目和團隊協作，因為它有助于確保一致性和減少不必要的復雜性。

指令

tailwind 總共就提供了 4 個指令。

@tailwind

@tailwind 指令就像是導入語句 import，將 Tailwind 提供的 base、components、utilities 和 variants 樣式插入到你的 CSS 中。

@layer

自定義樣式的時候，我們可能會添加一些自定義類。@layer 指令就是用來告訴 tailwind 這些自定義的類應該屬于三層中的哪一層，tailwind 你要按這一層的規矩管理它。

@tailwind base;
@tailwind components;
@tailwind utilities;@layer base {h1 {@apply text-2xl;}h2 {@apply text-xl;}
}@layer components {.btn-blue {@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;}
}@layer utilities {.filter-none {filter: none;}.filter-grayscale {filter: grayscale(100%);}
}

@apply

@apply 指令如上所示，就是可以在自定義的 css 中使用 tailwind 提供的類。而且它不僅僅局限于 tailwind 提供的類，自定義的類也可以提取其中的樣式進行復用。

• 不過要注意：從類中提取的樣式會刪掉 !important。

@layer base {h1 {@apply text-2xl;}
}

.foo {color: blue !important;
}.bar {@apply foo;
}

還有一點，就是 @apply 指令在 Vue 組件中無法提取應用其他 css 文件中自定義的類。比如在主 css 文件 main.css 中自定義了一個 card 類，在組件中無法 @apply 應用 card 類。

這是因為每個 Vue 組件中

解決辦法是在 tailwind 插件中添加自定義的 css 類，這樣就能全局共享了。

const plugin = require('tailwindcss/plugin')module.exports = {// ...plugins: [plugin(function ({ addComponents, theme }) {addComponents({'.card': {backgroundColor: theme('colors.white'),borderRadius: theme('borderRadius.lg'),padding: theme('spacing.6'),boxShadow: theme('boxShadow.xl'),}})})]
}

但老實說，最好的解決辦法就是根本不做這種奇怪的事情。因為你完全可以在 html 模版上寫類，壓根不需要

@config

@config 指令指定 Tailwind 在編譯該 CSS 文件時應使用哪個配置文件。這對于需要為不同的 CSS 入口點使用不同的配置文件的項目很有用。

你提供給 @config 指令的路徑是相對于該 CSS 文件的，并且將優先于 PostCSS 配置或 Tailwind CLI 中定義的路徑。

@config "./tailwind.admin.config.js";@tailwind base;
@tailwind components;
@tailwind utilities;

@config "./tailwind.site.config.js";@tailwind base;
@tailwind components;
@tailwind utilities;

函數

Tailwind 添加了一些自定義函數，用來在自定義樣式時，在 css 中獲取 tailwind 提供的樣式中的一些值。比如使用 tailwind 提供的間距，顏色等。

theme()

theme() 讀取 tailwind 類中的樣式。使用.表示法讀取值。

• 如果類中就帶了點，避免歧義使用[]獲取

.content-area {height: calc(100vh - theme(spacing.12));
}.content-area {height: calc(100vh - theme(spacing[2.5]));
}

• 訪問嵌套顏色值時不要使用破折號語法，要把破折號換成點

/* 錯誤 */
.btn-blue {background-color: theme(colors.blue-500);
}/* 正確 */
.btn-blue {background-color: theme(colors.blue.500);
}

• 要調整使用 theme 檢索到的顏色的透明度，請使用斜杠后跟你要使用的透明度值：

.btn-blue {background-color: theme(colors.blue.500 / 75%);
}

screen()

screen() 復用 tailwind 提供的斷點，直接在媒體查詢中使用。當想要媒體查詢時，不用自己去查看 tailwind 編譯的斷點結構，然后復制使用。

/* 自己手寫 */
@media (min-width: 640px) {/* ... */
}/* 直接用 tailwind 的斷點修飾符 */
@media screen(sm) {/* ... */
}

基礎案例

tailwind 默認提供了樣式重置。

怎么設置屬性任意值？

所有的任意值，也可以說自定義的屬性值，都是用[]包裹標記。
比如想要設置背景顏色為 #123456，bg-[#123456]。并且能自動區分，如text-[2em]是文字大小，text-[#123456]是文字顏色。

若是 tailwind 沒有提供的屬性，則全用[]包裹。如文字陰影：[text-shadow:0_3rem_#fff]

在[]中，多個屬性值之間的空格用_代替。[]中其實就相當于直接寫 css 屬性值，所以也支持 css 的函數。如 var、calc。
text-[var(--color)]
hover:shadow-[0_0_25px_var(--color),0_0_100px_var(--color)]

hover 父元素時，怎么選中子元素添加樣式？

group 標記父元素，然后 group:hover: 給子元素設置樣式。如group:hover:text-red。
其他的，如兄弟選擇器等，看文檔。

添加 animation 動畫

tailwind 默認提供了 4 個動畫，分別是：

1. spin 旋轉
2. ping 放大并透明，爆開的效果
3. pulse 脈動，呼吸燈一樣的效果
4. bounce 彈跳

<div class="animation-pulse">ikun</div>

顯然這些動畫是不夠的，要自定義 animation 動畫，則要去配置文件中配置 keyframes。并且可以在 animation 選項中像使用 css 一樣聲明使用 keyframes 動畫。這樣就可以以 animation-xxx 原子類的方式在 html 中使用動畫了。

• 注意所有的配置都是 js 對象寫法。

module.exports = {theme: {extend: {keyframes: {wiggle: {'0%, 100%': { transform: 'rotate(-3deg)' },'50%': { transform: 'rotate(3deg)' },}},animation: {wiggle: 'wiggle 1s ease-in-out infinite',}}}
}

<div class="animation-wiggle">ikun</div>

如果不想在 animation 選項中配置出對應的動畫工具類，也可以通過animation-[]在 html 中像 css 那樣使用：

<span style="--i: 123" class="inline-block animate-[floatDown_0.3s_calc(var(--i)*50ms)_ease] group-hover:animate-[floatUp_0.3s_ease_calc(var(--i)*50ms)_forwards]">ikun
</span>

注意：inline 元素如 span 無法應用動畫，要改成 block 或者 inline-block。

配置主題

tailwind 允許在配置文件中配置主題。其實主要是兩塊內容：

1. 修改或覆蓋 tailwind 提供的主題。比如修改 tailwind 默認提供的斷點分界線
2. 擴展工具類，extend。

如果你想保留主題選項的默認值，但還想添加新值，請在配置文件中的 theme.extend 鍵下添加擴展。該鍵下的值將與現有的 theme 值合并，并自動成為可供你使用的新類。

例如，這里我們擴展 fontFamily 屬性以添加 font-display 類，該類可以更改元素上使用的字體：

/** @type {import('tailwindcss').Config} */
module.exports = {theme: {extend: {fontFamily: {display: 'Oswald, ui-serif', // Adds a new `font-display` class}}}
}

將其添加到主題后，你可以像任何其他字體系列工具一樣使用它：

<h1 class="font-display">This uses the Oswald font
</h1>

擴展屏幕斷點：

/** @type {import('tailwindcss').Config} */
module.exports = {theme: {extend: {screens: {'3xl': '1600px', // Adds a new `3xl:` screen variant}}}
}

<blockquote class="text-base md:text-md 3xl:text-lg">Oh I gotta get on that internet, I'm late on everything!
</blockquote>