Emmet 和 Tailwind CSS速查表

目录

• Emmet 和 Tailwind CSS速查表
  • Emmet 语法速查表
• Tailwind CSS 工具类速查表
  • Flex 布局速查表
  • 使用 @apply和 @layer重用样式
    • 解决重复样式的方案
      • 使用 @apply 指令创建自定义的类
      • @layer定义更复杂的样式
      • 在 Vue 单文件组件 (SFC) 中使用
      • 实用建议与注意事项

Emmet 和 Tailwind CSS速查表

Emmet 和 Tailwind CSS 是前端开发中提升效率的两个重要工具，但它们的职责不同。Emmet 专注于快速生成 HTML 结构，而 Tailwind CSS 是一个 CSS 框架，通过提供大量工具类来快速构建样式。

下面是通过表格来对比和介绍它们的主要功能：

Emmet 语法速查表

Emmet 通过简短的缩写快速生成 HTML 代码，以下是一些常用语法

功能	缩写示例	扩展结果
生成标签	div	<div></div>
ID 和 Class	div#header.container	<div id="header" class="container"></div>
嵌套元素（子元素）	ul>li	<ul><li></li></ul>
兄弟元素	div+p	<div></div><p></p>
乘法	ul>li*5	<ul><li></li><li></li><li></li><li></li><li></li></ul>
项目编号	ul>li.item$*3	<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>
属性设置	a[href="#"]	<a href="#"></a>
文本内容	p{Hello World}	<p>Hello World</p>
隐式标签	.wrapper	<div class="wrapper"></div>
HTML 文档结构	!或 html:5	生成完整的 HTML5 基础结构

Tailwind CSS 工具类速查表

Tailwind 采用实用优先的理念，通过组合工具类来构建样式

功能类别	工具类示例	描述
布局与盒模型	flex, grid, block, hidden	设置显示模式
	m-4, p-4	设置外边距和内边距（4 = 1rem）
	mx-auto	水平居中
	w-1/2, h-screen	设置宽度（50%）和高度（100vh）
文本样式	text-lg, text-2xl	字体大小（large, 2x large）
	font-bold, font-medium	字体粗细（粗体、中等）
	text-center, text-left	文本对齐
	text-white, text-red-500	文本颜色（白色、红色500色阶）
背景与颜色	bg-white, bg-blue-500	背景颜色
	bg-cover, bg-center	背景图片覆盖方式和位置
	bg-gradient-to-r from-blue-500 to-indigo-600	从左到右的渐变背景
边框与阴影	border, border-2	边框（默认1px、2px宽）
	border-red-500	边框颜色
	rounded, rounded-lg, rounded-full	圆角（小、大、完全圆形）
	shadow, shadow-lg	盒子阴影（小、大）
交互与状态	hover:bg-blue-600	鼠标悬停时背景色变深蓝
	focus:border-blue-500	获得焦点时边框色变蓝
	disabled:opacity-50	禁用时透明度降低
响应式设计	md:w-1/2, lg:text-xl	在中等屏幕宽度为50%，大屏幕文本尺寸为xl
	hidden sm:block	移动端隐藏，小屏幕及以上显示

Flex 布局速查表

功能分类	常用类名	说明	示例代码或备注
Flex 容器	flex	启用 Flex 布局（块级）	<div class="flex">...</div>
	inline-flex	启用行内 Flex 布局	<div class="inline-flex">...</div>
方向 (Direction)	flex-row flex-row-reverse flex-col flex-col-reverse	水平排列 (默认) 水平反向排列 垂直排列 垂直反向排列	flex-row: 01 02 03 flex-row-reverse: 03 02 01
主轴对齐 (Justify)	justify-start justify-center justify-end justify-between justify-around justify-evenly	起始对齐 居中对齐 末尾对齐 两端对齐，项目间均匀分布 项目周围均匀分布 项目间隔均匀分布	justify-between: 常用于导航栏
交叉轴对齐 (Items)	items-start items-center items-end items-baseline items-stretch	顶部对齐 居中对齐 底部对齐 基线对齐 拉伸填充 (默认)
包裹 (Wrap)	flex-wrap flex-nowrap flex-wrap-reverse	允许换行 禁止换行 (默认) 反向换行	多行展示常用于图文列表、卡片布局
子元素伸缩 (Flex Item)	flex-1 flex-auto flex-initial flex-none	等分剩余空间 根据内容自适应 初始大小，可收缩 不伸缩，固定大小	flex-1常用于创建等分布局
扩展 (Grow)	grow grow-0	允许扩展填充空间 禁止扩展
收缩 (Shrink)	shrink shrink-0	允许收缩以适应容器 禁止收缩	shrink-0可防止元素被压缩，如图片
顺序 (Order)	order-1到 order-12 order-first(order-0) order-last(order-13)	控制子元素排序
间隙 (Gap)	gap-{size} gap-x-{size} gap-y-{size}	设置子元素间间隙	size可以是数字（如 1, 2, 4）或预定义大小（如 px）

使用 @apply和 @layer重用样式

解决重复样式的方案

Tailwind通过使用 @apply、@layer 和 variants 等功能，你可以轻松创建可复用的样式，减少代码重复，提高开发效率和可维护性。

• @apply：将常用的工具类组合成一个自定义类，减少重复代码。
• @layer：定义样式层级，将不同的样式组合组织起来，便于管理。
• variants：扩展工具类，使得样式可以根据状态（如响应式、悬停、聚焦等）变化。

使用 @apply 指令创建自定义的类

Tailwind 提供了 @apply 指令，可以在 CSS 文件中将一组常用的工具类组合成一个自定义的类，这样就可以减少 HTML 中的重复代码。通过这种方式，你可以将重复的工具类抽象成一个可复用的类。

/* 在全局 CSS 文件中定义，例如 src/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition-colors duration-200;
}

<!-- 在 HTML 或 Vue/React 组件中使用 -->
<button class="btn-primary">点击我</button>
<!-- 相比直接写一长串类名，这样更清晰易维护 -->
<!-- <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition-colors duration-200">点击我</button> -->
[7](@ref)

@layer定义更复杂的样式

@layer用于告诉 Tailwind 一组自定义样式属于哪个“层”，以控制其生成顺序和优先级。Tailwind 有三个层：base, components, utilities

最佳实践是将通过 @apply提取的自定义类放在 @layer components中 。

/* 在全局 CSS 文件中 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* 卡片组件样式 */
  .card {
    @apply bg-white shadow-md rounded-xl p-6 border border-gray-200;
  }
  /* 带响应式的卡片 */
  .responsive-card {
    @apply p-4 md:p-6 lg:p-8; /* 断点前缀在 @apply 中同样有效 */
  }
}

@layer utilities {
  /* 自定义工具类 */
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

使用 @layer的好处是 Tailwind 会自动将这些样式与对应的层（base, components, utilities）合并，并确保正确的优先级顺序（例如 utilities层优先级最高）

在 Vue 单文件组件 (SFC) 中使用

<template>
  <button class="local-btn">局部按钮</button>
</template>

<style scoped>
/* 需要确保项目配置支持 (如 postcss-plugins) */
.local-btn {
  @apply px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600;
}
</style>

实用建议与注意事项

• 何时复用样式：当一个样式组合重复出现 3 次以上，或需要维护复杂状态（如 hover:, focus:），或包含响应式断点时，考虑使用 @apply和 @layer components提取复用 。
• •避免过度抽象：不要为每个简单的工具类组合都创建组件类，这会丧失 Tailwind 原子化 CSS 的灵活性。例如，直接使用 <p class="text-red-500 font-bold">...</p>比定义一个 .red-bold-text更合适 。
• •命名语义化：为自定义类起有意义的名字，如 .primary-btn, .search-input, .dashboard-card，而不是 .style-1, .big-button。
• •优先级问题：在 @apply中，默认情况下任何内联的 !important规则会被删除以避免特殊性问题。如果你需要 !important，请在 @apply的末尾添加 !important。