mcpField
T
tailwindcss

tailwindcss

github.com/timelessco设计与 UI79 次安装
代码仓库

关于 tailwindcss

一份 Tailwind CSS 使用指南,面向采用实用类框架编写 Web 界面的开发者。内容涵盖响应式布局、主题、交互状态和构建时生成 CSS。

主要功能

  1. 01使用实用类进行样式编写
  2. 02响应式布局与断点
  3. 03主题令牌与自定义
  4. 04深色模式和交互状态
  5. 05构建时优化 CSS

适用场景

  1. 01为 Web 应用组件添加样式
  2. 02构建移动优先的响应式页面
  3. 03创建一致的设计系统
  4. 04添加深色模式和状态样式

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/timelessco/recollect --skill tailwindcss

安装后在 Claude Code 中输入/tailwindcss确认已加载。

详细介绍

Tailwind CSS 技能

Tailwind CSS 是一个实用工具优先的 CSS 框架,通过提供预构建的实用工具类,实现快速 UI 开发。它会在构建时扫描项目文件并生成经过优化的 CSS,因此不会产生运行时开销,且生产环境构建包体积更小。

何时使用此技能

在以下情况使用此技能:

  • 使用移动优先设计构建响应式布局
  • 实现深色模式和主题自定义
  • 使用一致的间距、颜色和排版创建自定义设计系统
  • 为 React、Vue、Svelte 或任何 Web 框架的组件设置样式
  • 通过快速视觉反馈来制作界面原型
  • 使用经过优化的 CSS 构建包来构建生产应用
  • 使用基于状态的样式(悬停、焦点、禁用等)
  • 使用 Grid 和 Flexbox 实用工具创建复杂布局

核心概念

实用工具优先的方法

Tailwind 提供低级实用工具类,可直接应用于 HTML 元素,而无需编写自定义 CSS:


<div class="card">
	<h2 class="card-title">Title</h2>
</div>


<div class="rounded-lg bg-white p-6 shadow-md">
	<h2 class="text-2xl font-bold text-gray-900">Title</h2>
</div>

优点:

  • 无需切换 CSS 文件——样式与标记放在一起
  • 无需命名约定
  • 自动移除无用代码
  • 团队内使用一致的设计令牌
  • 快速迭代,避免 CSS 臃肿
构建时处理

Tailwind 会在构建时扫描源文件,并且只生成实际使用的 CSS 类:

// Tailwind analyzes these files
content: [
	"./src/**/*.{js,jsx,ts,tsx}",
	"./app/**/*.{js,jsx,ts,tsx}",
	"./components/**/*.{js,jsx,ts,tsx}",
];

结果:生产环境构建包经过优化,且没有运行时开销。

安装与设置

使用 Vite 进行现代化设置

步骤 1:安装依赖项

npm install -D tailwindcss @tailwindcss/vite
# or
pnpm add -D tailwindcss @tailwindcss/vite
# or
yarn add -D tailwindcss @tailwindcss/vite

步骤 2:配置 Vite

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	plugins: [tailwindcss()],
});

步骤 3:在 CSS 中导入

/* src/index.css */
@import "tailwindcss";

步骤 4:在 HTML 中引用样式表

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="./src/index.css" />
	</head>
	<body>
		<div class="bg-blue-500 p-4 text-white">Hello Tailwind!</div>
	</body>
</html>
特定框架的设置

Next.js(App Router):

npx create-next-app@latest --tailwind

Next.js(手动设置):

// tailwind.config.js
module.exports = {
	content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
};

使用 Vite 的 React:

npm create vite@latest my-app -- --template react
npm install -D tailwindcss @tailwindcss/vite

Vue:

npm install -D tailwindcss @tailwindcss/vite

Svelte:

npm install -D tailwindcss @tailwindcss/vite

Astro:

npx astro add tailwind
PostCSS 设置(替代方案)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// postcss.config.js
export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	},
};

设计系统与令牌

默认设计系统

Tailwind 内置了全面的默认设计系统:

  • 颜色:18 种调色板,每种包含 11 个色阶(50-950)
  • 间距:从 0.25rem 到 96rem 的一致比例
  • 排版:字体大小、字重、行高
  • 断点:移动优先的响应式系统
  • 阴影:用于营造纵深感的层级系统
  • 边框圆角:不同级别的圆角
自定义主题

在 CSS 中使用 @theme 指令:

@import "tailwindcss";

@theme {
	/* Custom colors */
	--color-brand-50: oklch(0.97 0.02 264);
	--color-brand-500: oklch(0.55 0.22 264);
	--color-brand-900: oklch(0.25 0.15 264);

	/* Custom fonts */
	--font-display: "Satoshi", "Inter", sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	/* Custom spacing */
	--spacing-18: calc(var(--spacing) * 18);
	--spacing-navbar: 4.5rem;

	/* Custom breakpoints */
	--breakpoint-3xl: 120rem;
	--breakpoint-4xl: 160rem;

	/* Custom shadows */
	--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}

用法:

<div class="bg-brand-500 font-display shadow-glow">Custom themed element</div>
颜色系统

使用默认颜色:

<div class="bg-blue-500">Background</div>
<p class="text-red-600">Text</p>
<div class="border-green-400">Border</div>

颜色比例:

  • 50:最浅
  • 100-400:较浅的变化
  • 500:基础颜色
  • 600-800:较深的变化
  • 950:最深

颜色透明度修饰符:

<div class="bg-black/75">75% opacity</div>
<div class="text-blue-500/30">30% opacity</div>
<div class="bg-purple-500/87">87% opacity</div>

实用工具类

布局

显示:

<div class="block">Block</div>
<div class="inline-block">Inline Block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>

Flexbox:

<div class="flex items-center justify-between gap-4">
	<div>Item 1</div>
	<div>Item 2</div>
</div>

<div class="flex flex-col items-start">
	<div>Vertical stack</div>
</div>

Grid:

<div class="grid grid-cols-3 gap-4">
	<div>Column 1</div>
	<div>Column 2</div>
	<div>Column 3</div>
</div>

<div class="grid grid-cols-[1fr_500px_2fr] gap-6">
	<div>Flexible</div>
	<div>Fixed 500px</div>
	<div>More flexible</div>
</div>

定位:

<div class="relative">
	<div class="absolute top-0 right-0">Positioned</div>
</div>

<div class="fixed right-4 bottom-4">Fixed</div>
<div class="sticky top-0">Sticky header</div>
间距

内边距与外边距:

<div class="p-4">Padding all sides</div>
<div class="px-6 py-3">Padding X and Y</div>
<div class="pt-8 pb-4">Padding top/bottom</div>
<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="-mt-4">Negative margin</div>

间隔(Flexbox/Grid):

<div class="flex gap-4">Flex with gap</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">Grid with X/Y gap</div>
排版

字体大小:

<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<h1 class="text-4xl font-bold">Heading</h1>

字重:

<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

文本对齐:

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>

行高:

<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-relaxed">Relaxed line height</p>

组合字体实用工具:

<h1 class="text-4xl/tight font-bold">Font size 4xl with tight line-height</h1>
颜色与背景

背景颜色:

<div class="bg-white">White background</div>
<div class="bg-gray-100">Gray background</div>
<div class="bg-linear-to-r from-blue-500 to-purple-600">
	Gradient background
</div>

文本颜色:

<p class="text-gray-900">Dark text</p>
<p class="text-blue-600">Blue text</p>
<a class="text-blue-500 hover:text-blue-700">Link</a>
边框
<div class="border">Default border</div>
<div class="border-2 border-gray-300">2px border</div>
<div class="border-t border-b-2">Top and bottom borders</div>
<div class="rounded-sm">Rounded corners</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Fully rounded</div>
<div class="rounded-md border border-red-500">Combined</div>
阴影
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none">No shadow</div>

响应式设计

移动优先断点

Tailwind 采用移动优先的方法。基础样式适用于所有屏幕尺寸,然后使用断点前缀在更大屏幕尺寸下覆盖样式:

断点:

  • sm: - 640px 及以上
  • md: - 768px 及以上
  • lg: - 1024px 及以上
  • xl: - 1280px 及以上
  • 2xl: - 1536px 及以上

示例:


<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
	<div>Item 4</div>
</div>


<div class="hidden lg:block">Desktop only content</div>


<div class="block lg:hidden">Mobile only content</div>


<h1 class="text-2xl md:text-4xl lg:text-6xl">Responsive heading</h1>
自定义断点
@theme {
	--breakpoint-3xl: 120rem;
	--breakpoint-tablet: 48rem;
}
<div class="tablet:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>
最大宽度查询

<div class="flex max-md:hidden">Hidden on mobile</div>


<div class="md:block lg:hidden">Only visible on tablets</div>
容器查询

根据父容器宽度设置元素样式:

<div class="@container">
	<div class="@md:grid-cols-2 @lg:grid-cols-3">Responds to parent width</div>
</div>

交互状态

悬停状态
<button class="bg-blue-500 text-white hover:bg-blue-700">Hover me</button>

<a class="text-blue-600 hover:underline"> Hover link </a>

<div class="scale-100 transition-transform hover:scale-105">Scale on hover</div>
焦点状态
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

<button
	class="bg-blue-500 focus:ring-4 focus:ring-blue-300 focus:outline-hidden"
>
	Accessible button
</button>
激活状态
<button class="bg-blue-500 active:bg-blue-800">Click me</button>
禁用状态
<button
	class="bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
	disabled
>
	Disabled button
</button>

<input class="disabled:bg-gray-100" disabled />
表单状态
<input class="invalid:border-red-500 focus:invalid:ring-red-200" required />

<input
	class="placeholder:text-gray-400 placeholder:italic"
	placeholder="Search..."
/>

<input type="checkbox" class="checked:bg-blue-500" />
组悬停(父级状态)
<div class="group hover:bg-gray-100">
	<p class="group-hover:text-blue-600">Text changes when parent is hovered</p>
	<img class="group-hover:opacity-50" src="..." />
</div>
同级状态(兄弟元素状态)
<input type="checkbox" class="peer" id="terms" />
<label for="terms" class="peer-checked:text-blue-600"> I accept terms </label>

<input type="email" class="peer" required />
<p class="hidden text-red-600 peer-invalid:block">Invalid email</p>

深色模式

设置深色模式

媒体查询方式(自动):

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
	Auto switches based on system preference
</div>

基于类的方式(手动切换):

// Add .dark class to <html> element
document.documentElement.classList.toggle("dark");
深色模式工具类

<div class="bg-white dark:bg-slate-900">Background</div>
<p class="text-gray-900 dark:text-gray-100">Text</p>


<div class="border-gray-200 dark:border-gray-700">Border</div>


<div
	class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900"
>
	<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
		Dark mode card
	</h2>
	<p class="text-gray-600 dark:text-gray-300">Content adapts to theme</p>
</div>
深色模式切换实现
// Store preference
function toggleDarkMode() {
	const isDark = document.documentElement.classList.toggle("dark");
	localStorage.setItem("theme", isDark ? "dark" : "light");
}

// Initialize on load
if (
	localStorage.theme === "dark" ||
	(!("theme" in localStorage) &&
		window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
	document.documentElement.classList.add("dark");
}

任意值

使用方括号指定一次性自定义值:

像素值:

<div class="top-[117px]">Custom position</div>
<p class="text-[22px]">Custom font size</p>
<div class="w-[500px]">Custom width</div>

颜色:

<div class="bg-[#bada55]">Custom hex color</div>
<div class="text-[rgb(123,45,67)]">RGB color</div>
<div class="bg-[oklch(0.55_0.22_264)]">OKLCH color</div>

CSS 变量:

<div class="bg-(--my-brand-color)">CSS variable</div>
<div class="text-(length:--my-font-size)">Type hint</div>

复杂值:

<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
<div class="content-['>']">Custom content</div>
<div class="mask-type-luminance">Custom property</div>

过渡与动画

过渡
<button class="bg-blue-500 transition-colors hover:bg-blue-700">
	Smooth color transition
</button>

<div class="transform transition-transform hover:scale-110">
	Scale with transition
</div>

<div class="transition-all duration-300 ease-in-out hover:shadow-lg">
	Multiple transitions
</div>


<div class="transition duration-150">Fast</div>
<div class="transition duration-300">Normal</div>
<div class="transition duration-500">Slow</div>
变换

<div class="scale-95 hover:scale-100">Scale</div>


<div class="rotate-45">Rotate 45deg</div>
<div class="hover:rotate-6">Slight rotation</div>


<div class="translate-x-4 translate-y-2">Move</div>


<div class="skew-x-12">Skew</div>


<div class="translate-x-2 scale-110 rotate-3 transform">
	Multiple transforms
</div>
动画
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Pinging</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>
自定义动画
@theme {
	--animate-slide-in: slide-in 0.5s ease-out;
}

@keyframes slide-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}
<div class="animate-slide-in">Custom animation</div>

高级模式

自定义工具类

创建可重复使用的工具类:

@utility content-auto {
	content-visibility: auto;
}

@utility tab-* {
	tab-size: var(--tab-size-*);
}
<div class="content-auto">Custom utility</div>
<pre class="tab-4">Custom tab size</pre>
自定义变体
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
@custom-variant aria-checked (&[aria-checked="true"]);
<div theme-midnight:bg-navy-900>Applies when data-theme="midnight"</div>
图层组织
@layer base {
	h1 {
		@apply text-4xl font-bold;
	}

	body {
		@apply bg-white text-gray-900;
	}
}

@layer components {
	.btn {
		@apply rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700;
	}

	.card {
		@apply rounded-lg bg-white p-6 shadow-md;
	}
}
Apply 指令

将重复使用的工具类提取为 CSS 类:

.btn-primary {
	@apply rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700;
}

.input-field {
	@apply rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-hidden;
}

组件示例

按钮组件

<button
	class="transform rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-md transition-all duration-200 hover:scale-105 hover:bg-blue-700 hover:shadow-lg focus:ring-4 focus:ring-blue-300 focus:outline-hidden active:bg-blue-800 disabled:cursor-not-allowed disabled:opacity-50"
>
	Click me
</button>


<button
	class="rounded-lg border-2 border-gray-300 bg-white px-6 py-3 font-semibold text-gray-700 hover:bg-gray-50"
>
	Secondary
</button>


<button class="rounded-full p-2 transition-colors hover:bg-gray-100">
	<svg class="h-6 w-6">...</svg>
</button>
卡片组件
<div
	class="overflow-hidden rounded-xl bg-white shadow-lg transition-shadow hover:shadow-xl dark:bg-gray-800"
>
	<img class="h-48 w-full object-cover" src="..." alt="Card image" />
	<div class="p-6">
		<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
			Card Title
		</h3>
		<p class="mb-4 text-gray-600 dark:text-gray-300">
			Card description text goes here
		</p>
		<button
			class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700"
		>
			Learn More
		</button>
	</div>
</div>
表单组件
<form
	class="mx-auto max-w-md rounded-lg bg-white p-8 shadow-md dark:bg-gray-800"
>
	<div class="mb-6">
		<label
			class="mb-2 block font-semibold text-gray-700 dark:text-gray-300"
			for="email"
		>
			Email
		</label>
		<input
			type="email"
			id="email"
			class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white"
			placeholder="[email protected]"
		/>
	</div>

	<div class="mb-6">
		<label
			class="mb-2 block font-semibold text-gray-700 dark:text-gray-300"
			for="password"
		>
			Password
		</label>
		<input
			type="password"
			id="password"
			class="w-full rounded-lg border border-gray-300 px-4 py-2 invalid:border-red-500 focus:ring-2 focus:ring-blue-500 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white"
		/>
	</div>

	<button
		type="submit"
		class="w-full rounded-lg bg-blue-600 py-3 font-bold text-white transition-colors hover:bg-blue-700"
	>
		Sign In
	</button>
</form>
导航组件
<nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-900">
	<div class="container mx-auto px-4">
		<div class="flex h-16 items-center justify-between">
			<div class="flex items-center gap-8">
				<a href="/" class="text-2xl font-bold text-blue-600">Logo</a>
				<div class="hidden gap-6 md:flex">
					<a
						href="#"
						class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
						>Home</a
					>
					<a
						href="#"
						class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
						>About</a
					>
					<a
						href="#"
						class="text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300"
						>Services</a
					>
				</div>
			</div>
			<button
				class="rounded-sm p-2 hover:bg-gray-100 md:hidden dark:hover:bg-gray-800"
			>
				<svg class="h-6 w-6">...</svg>
			</button>
		</div>
	</div>
</nav>
网格布局
<div class="container mx-auto px-4 py-8">
	<div
		class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
	>
		<div class="rounded-lg bg-white p-6 shadow-md">Item 1</div>
		<div class="rounded-lg bg-white p-6 shadow-md">Item 2</div>
		<div class="rounded-lg bg-white p-6 shadow-md">Item 3</div>
		<div class="rounded-lg bg-white p-6 shadow-md">Item 4</div>
	</div>
</div>

最佳实践

1. 使用一致的间距比例

<div class="mb-6 p-4">
	
	<div class="mb-[23px] p-[17px]"></div>
</div>
2. 利用设计令牌

<button class="bg-blue-600 hover:bg-blue-700">
	
	<button class="bg-[#3B82F6] hover:bg-[#2563EB]"></button>
</button>
3. 移动优先的响应式设计

<div class="text-base md:text-lg lg:text-xl">
	
	<div class="text-xl lg:text-base"></div>
</div>
4. 提取组件
// React component with Tailwind
function Button({ children, variant = "primary" }) {
	const baseClasses = "font-semibold px-6 py-3 rounded-lg transition-colors";
	const variants = {
		primary: "bg-blue-600 hover:bg-blue-700 text-white",
		secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900",
	};

	return (
		<button className={`${baseClasses} ${variants[variant]}`}>
			{children}
		</button>
	);
}
5. 对重复模式使用 @apply
/* Only use @apply for truly repeated patterns */
@layer components {
	.card {
		@apply rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg;
	}
}
6. 优先考虑无障碍性
<button class="focus:ring-4 focus:ring-blue-300 focus:outline-hidden">
	Accessible button
</button>

<a class="text-blue-600 hover:underline focus:outline-2 focus:outline-offset-2">
	Accessible link
</a>
7. 性能优化
  • 在生产环境中使用 PurgeCSS(现代配置会自动处理)
  • 避免使用动态类名:class={text-${color}-500} 无法正常工作
  • 如有需要,可为动态类使用 safelist
8. 保持深色模式一致性

<div
	class="border border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
>
	Complete dark mode support
</div>

常见模式

内容居中

<div class="flex justify-center">Content</div>
<div class="mx-auto w-fit">Content</div>


<div class="flex h-screen items-center">Content</div>


<div class="flex h-screen items-center justify-center">Centered content</div>
带最大宽度的全宽容器
<div class="container mx-auto max-w-7xl px-4">
	Content with consistent max width
</div>
宽高比容器
<div class="aspect-square">Square</div>
<div class="aspect-video">16:9 video</div>
<div class="aspect-4/3">4:3 ratio</div>
截断文本
<p class="truncate">Long text that will be truncated with ellipsis...</p>

<p class="line-clamp-3">
	Long text that will be truncated after 3 lines with ellipsis...
</p>
平滑滚动
<html class="scroll-smooth">
	<a href="#section">Smooth scroll to section</a>
</html>

故障排除

类无法生效
  1. 检查内容配置:
// tailwind.config.js
content: [
	"./src/**/*.{js,jsx,ts,tsx}",
	// Add all file paths where you use Tailwind
];
  1. 动态类无法生效:
// ❌ Won't work
const color = 'blue'
<div className={`text-${color}-500`} />

// ✅ Works
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'} />
  1. 特异性问题:
/* Use !important sparingly */
<div class="text-red-500!">Overrides other styles</div>
构建问题
# Clear cache and rebuild
rm -rf .next node_modules/.cache
npm run dev
IntelliSense 无法正常工作

安装官方扩展:

  • VS Code:「Tailwind CSS IntelliSense」
  • 在 .vscode/settings.json 中配置:
{
	"tailwindCSS.experimental.classRegex": [
		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
	]
}

资源

框架集成示例

React
export function Card({ title, description }) {
	return (
		<div className="rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
			<h3 className="mb-2 text-2xl font-bold">{title}</h3>
			<p className="text-gray-600">{description}</p>
		</div>
	);
}
Vue
<template>
	<div
		class="rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-lg"
	>
		<h3 class="mb-2 text-2xl font-bold">{{ title }}</h3>
		<p class="text-gray-600">{{ description }}</p>
	</div>
</template>

<script setup>
defineProps(["title", "description"]);
</script>
Svelte
<script>
  export let title
  export let description
</script>

<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-2xl font-bold mb-2">{title}</h3>
  <p class="text-gray-600">{description}</p>
</div>

实施清单

实施 Tailwind CSS 时:

  • 安装 tailwindcss 和框架专用插件
  • 配置构建工具(Vite/PostCSS/CLI)
  • 在配置中设置内容路径
  • 在 CSS 文件中导入 Tailwind
  • 配置自定义主题令牌(如有需要)
  • 设置深色模式策略
  • 安装 VS Code IntelliSense 扩展
  • 创建可重复使用的组件模式
  • 实现响应式断点
  • 添加无障碍焦点状态
  • 测试所有组件的深色模式
  • 针对生产构建进行优化
  • 记录自定义工具类和组件

评论

支持 Markdown