tailwindcss-development

Tailwind CSS 开发

文档

使用 search-docs 查阅 Tailwind CSS v3 的详细模式和文档。

基本用法

• 使用 Tailwind CSS 类为 HTML 添加样式。在引入新模式前，先检查并遵循项目现有的 Tailwind 规范。
• 可以提出将重复模式提取为符合项目规范的组件，例如 Blade、JSX 或 Vue 组件。
• 注意类的放置位置、顺序、优先级和默认值。删除冗余类，谨慎地向父元素或子元素添加类以减少重复，并对元素进行逻辑分组。

Tailwind CSS v3 特性

• 始终使用 Tailwind CSS v3，并确认只使用其支持的类。
• 在 tailwind.config.js 文件中配置 Tailwind。
• 使用 @tailwind 指令导入 Tailwind：

@tailwind base;
@tailwind components;
@tailwind utilities;

间距

列出项目时，使用 gap 工具类设置间距。不要使用 margin。

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

深色模式

如果现有页面和组件支持深色模式，新页面和组件也必须以相同方式支持，通常使用 dark: 变体：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

常见模式

Flexbox 布局

<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>

Grid 布局

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

验证

1. 在浏览器中检查视觉呈现
2. 测试响应式断点
3. 如果项目使用深色模式，请验证其效果

常见问题

• 使用 margin 而非 gap 工具类设置同级元素之间的间距
• 项目使用深色模式时，忘记添加深色模式变体
• 添加新工具类前，没有检查项目现有规范
• 过度使用内联样式，而 Tailwind 类已足够满足需求