Tailwind CSS 简述

Tailwind CSS 简介

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

Tailwind CSS 的特点

  1. 功能类优先:直接在 HTML 中应用样式,减少在 CSS 文件中编写自定义样式的需求
  2. 高度可定制:通过配置文件可以完全控制颜色、断点、字体等设计系统
  3. 响应式设计:内置响应式变体,轻松创建适应不同屏幕尺寸的界面
  4. 暗色模式:内置暗色模式支持
  5. 按需生成:只包含你使用的样式,保持 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 支持。

  1. 打开 VSCode 的扩展商店,搜索 "Tailwind CSS IntelliSense"。
  2. 点击安装。

安装 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');
相关推荐
楚轩努力变强34 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端36 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python44 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸3 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest