什么是Tailwind Css?

一個實用優先的 CSS 框架，可以直接在標記中組合以構建任何設計。

開始使用Tailwind Css

如何安裝

下面是使用vite構建工具的方法

①安裝 Tailwind CSS:

tailwindcss通過@tailwindcss/vitenpm安裝。

npm install tailwindcss @tailwindcss/vite

②配置 Vite 插件：

將插件添加@tailwindcss/vite到您的 Vite 配置中。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'  //這一部分
export default defineConfig({plugins: [tailwindcss(),  // 這一部分],
})

③ 導入 Tailwind CSS：

自定義一個css文件，并向您的 CSS 文件添加一個@import導入 Tailwind CSS 的內容。

@import "tailwindcss";

④在main.js上引入這個css文件：

import '@/index.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

VS Code 的 IntelliSense

Visual Studio Code 的官方Tailwind CSS IntelliSense擴展通過為用戶提供自動完成、語法突出顯示和 linting 等高級功能增強了 Tailwind 開發體驗。

• 自動完成——為實用程序類以及CSS 函數和指令提供智能建議。
• Linting — 突出顯示 CSS 和標記中的錯誤和潛在缺陷。
• 懸停預覽— 將鼠標懸停在實用程序類上時顯示其完整的 CSS。
• 語法高亮——以便正確高亮使用自定義 CSS 語法的 Tailwind 功能。

注意

在 Tailwind CSS v4 中，tailwindcss.config.js 配置文件已被移除，希望人們可以使用我們直接生成的 CSS 變量，這要簡單得多，并且會顯著減少您的捆綁包大小。

Preflight

Preflight 是 Tailwind CSS 的核心基礎樣式層，基于 modern-normalize 構建，旨在消除瀏覽器默認樣式的不一致，并提供一個統一的樣式起點。它自動注入到 base 圖層中，確保項目在設計系統約束內一致運行。

關鍵樣式重置

1. 邊距移除

Preflight 刪除所有元素的默認邊距，避免意外依賴瀏覽器默認值：

*,
::after,
::before,
::backdrop,
::file-selector-button {margin: 0;padding: 0;
}

2. 邊框樣式重置

統一所有元素的邊框樣式，確保 border 類可直接使用：

*,
::after,
::before,
::backdrop,
::file-selector-button {box-sizing: border-box;border: 0 solid;
}

3. 標題無樣式

標題元素默認不設置字體大小和粗細，需手動定義：

h1,
h2,
h3,
h4,
h5,
h6 {font-size: inherit;font-weight: inherit;
}

4. 列表無樣式

默認移除列表項目符號和編號：

ol,
ul,
menu {list-style: none;
}

5. 圖像與替換元素

• 圖像默認為 block 布局，防止對齊問題：

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {display: block;vertical-align: middle;
  }
  

• 圖像和視頻限制在容器寬度內，保持響應式：

  img,
  video {max-width: 100%;height: auto;
  }
  

添加自定義樣式

Tailwind 從一開始就被設計為可擴展和可定制的，因此無論您構建什么，您都不會感覺自己正在與框架作斗爭。

注意，下述內容都應在你自定義的css文件內操作，因為最新版本去除了配置文件

自定義主題

如果您想要更改調色板、間距比例、排版比例或斷點等內容，請使用@themeCSS 中的指令添加自定義內容：

@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}

為什么@theme不是:root？

主題變量不僅僅是CSS變量 - 它們還指示 Tailwind 創建可在 HTML 中使用的新實用程序類。

由于主題變量的作用比常規 CSS 變量更多，Tailwind 使用特殊語法，以便始終明確定義主題變量。主題變量也必須在頂層定義，并且不能嵌套在其他選擇器或媒體查詢中，使用特殊語法可以強制執行此要求。

使用任意值

當你發現自己確實需要top: 117px在正確的位置獲取背景圖像時，請使用 Tailwind 的方括號表示法動態生成具有任意值的類：

<div class="top-[117px]"><!-- ... -->
</div>

這適用于框架中的所有內容，包括背景顏色、字體大小、偽元素內容等：

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"><!-- ... -->
</div>

函數和指令

指令是您可以在 CSS 中使用的自定義 Tailwind 特定規則，它為 Tailwind CSS 項目提供特殊功能。

@import

使用@import指令內聯導入 CSS 文件，包括 Tailwind 本身：

@import "tailwindcss";

@theme

使用@theme指令定義項目的自定義設計標記，如字體、顏色和斷點：

@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}

@variant

使用@variant指令將 Tailwind 變體應用于 CSS 中的樣式：

.my-element {background: white;@variant dark {background: black;}
}

@apply

使用@apply指令將任何現有的實用程序類內聯到您自己的自定義 CSS 中：

.select2-dropdown {@apply rounded-b-lg shadow-md;
}.select2-search {@apply rounded border border-gray-300;
}.select2-results__group {@apply text-lg font-bold text-gray-900;
}

當您需要編寫自定義 CSS（例如覆蓋第三方庫中的樣式）但仍想使用設計令牌并使用您在 HTML 中習慣使用的相同語法時，這很有用。

@reference

如果您想在 Vue 或 Svelte 組件的塊中或 CSS 模塊中使用@apply或，則需要導入主題變量、自定義實用程序和自定義變體，以使這些值在該上下文中可用。@variant``<style>

為了在輸出中不重復任何 CSS，請使用@reference指令導入主樣式表以供參考，而無需實際包含樣式：

<template><h1>Hello world!</h1>
</template><style>@reference "../../app.css";h1 {@apply text-2xl font-bold text-red-500;}
</style>

如果您只是使用默認主題而沒有進行任何自定義，則可以tailwindcss直接導入：

<template><h1>Hello world!</h1>
</template><style>@reference "tailwindcss";h1 {@apply text-2xl font-bold text-red-500;}
</style>

--alpha()

使用該--alpha()函數調整顏色的不透明度：

輸入 CSS

.my-element {color: --alpha(var(--color-lime-300) / 50%);
}

編譯后的 CSS

.my-element {color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

–spacing()

使用該--spacing()函數根據您的主題生成間距值：

輸入 CSS

.my-element {margin: --spacing(4);
}

編譯后的 CSS

.my-element {margin: calc(var(--spacing) * 4);
}