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');
相关推荐
像风一样自由20203 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem44 分钟前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴1 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github