Tailwind CSS 简述

Tailwind CSS 简介

Tailwind CSS 是一个功能类优先的 CSS 框架，它与传统的 UI 框架（如 Bootstrap、Bulma 等）不同，不提供预设的组件，而是提供大量的功能类（utility classes），让开发者能够直接在 HTML 中组合这些类来构建自定义设计。

Tailwind CSS 的特点

功能类优先：直接在 HTML 中应用样式，减少在 CSS 文件中编写自定义样式的需求
高度可定制：通过配置文件可以完全控制颜色、断点、字体等设计系统
响应式设计：内置响应式变体，轻松创建适应不同屏幕尺寸的界面
暗色模式：内置暗色模式支持
按需生成：只包含你使用的样式，保持 CSS 文件体积小

与传统 CSS 框架的区别

传统 CSS 框架提供预设组件，而 Tailwind 提供原子化的功能类

html 复制代码

<!-- Bootstrap 按钮 -->
<button class="btn btn-primary">按钮</button>

<!-- Tailwind CSS 按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按钮
</button>

Tailwind CSS IntelliSense (vscode 插件)

Tailwind CSS 是一种实用为主的 CSS 框架，使用类名来快速构建响应式设计。Tailwind CSS IntelliSense 插件为 VSCode 提供了强大的 Tailwind CSS 支持。

打开 VSCode 的扩展商店，搜索 "Tailwind CSS IntelliSense"。
点击安装。

安装 Tailwind CSS

在vite基础项目中使用 Tailwind CSS V4

bash 复制代码

npm create vite@latest
# 选择 vanilla 与 ts
# 进入项目目录，安装依赖 npm install

# 安装 tailwindcss 依赖
npm install tailwindcss @tailwindcss/vite

使用 Tailwind CSS

修改或创建vite配置文件（vite.config.js）

js 复制代码

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

在入口 CSS 文件（如 src/style.css）中添加 Tailwind 指令

css 复制代码

@import "tailwindcss";

在入口js文件（如 src/main.ts）中引用css。项目中就可以使用 Tailwind CSS 原子类了。

js 复制代码

import './style.css'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <h1 class="text-3xl font-bold underline text-blue-800">
      Hello world!
    </h1>
  </div>
`

Tailwindcss 夜间模式

在 tailwindcss 里面，要开启夜间模式，非常非常简单，只需要使用 dark: 变体即可，dark: 后面跟上原子类，表示夜间模式下面需要应用的原子类。

设置夜间模式

入口css

css 复制代码

@import "tailwindcss";
/* 系统夜间模式 */
@custom-variant dark (&:where(.dark,.dark *));

使用夜间模式

html 复制代码

<!doctype html>
<html lang="en" class="dark">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + TS</title>
</head>

<body class="h-screen bg-white dark:bg-black">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

动态设置

js 复制代码

document.documentElement.classList.toggle('dark');

主题切换

在 global.css 中，我们使用 @theme inline 定义主题变量，并通过 data-theme 属性指定主题

配置全局主题变量

css 复制代码

@import "tailwindcss";

@theme inline {
  --color-primary: var(--color-brand);
  --color-background: var(--color-bg);
  --color-text: var(--color-tx);
}

/* 亮色模式 */
[data-theme="light"] {
  --color-brand: #1DA1F2;
  --color-bg: #ffffff;
  --color-tx: #333333;
}

/* 深色模式 */
[data-theme="dark"] {
  --color-brand: #ff9800;
  --color-bg: #1a1a1a;
  --color-tx: #f5f5f5;
}

引入主题

main.js

js 复制代码

import './style.css'
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <h1 class="text-3xl font-bold underline text-blue-800">
      Hello world!
    </h1>
    <div class="text-myavocado-leo border-2 border-primary bg-background text-text">test</div>
  </div>
`

设置主题

index.html （data-theme="dark"）

html 复制代码

<!doctype html>
<html lang="en" data-theme="dark">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + TS</title>
</head>

<body class="h-screen bg-white dark:bg-black">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

js 动态设置

js 复制代码

document.documentElement.setAttribute("data-theme", 'light');