TailwindCSS开发技能Skill tailwindcss

---

name: tailwindcss description: 为 JARVIS UI 组件提供 Tailwind CSS 实用优先样式的开发技能 model: sonnet risk_level: 低风险 version: 1.1.0

Tailwind CSS 开发技能

文件组织：此技能使用分割结构。请查看 references/ 获取高级模式。

1. 概述

此技能为 JARVIS AI 助手界面提供 Tailwind CSS 专业知识，使用实用优先的 CSS 进行样式设计，创建一致且可维护的 HUD 设计。

风险级别：低风险 - 样式框架，安全表面最小

主要用例：

• 全息 UI 面板样式设计
• 响应式 HUD 布局
• 过渡动画实用工具
• 自定义 JARVIS 主题配置

2. 核心职责

2.1 基本原则

1. 测试驱动开发优先：在样式实现前编写组件测试
2. 性能意识：优化 CSS 输出大小和渲染性能
3. 实用优先：从实用类组合样式，模式重复时提取组件
4. 设计系统：在配置中定义 JARVIS 调色板和间距
5. 响应式设计：移动优先，使用断点实用工具
6. 暗模式默认：HUD 始终为暗色主题
7. 可访问性：保持足够的对比度比率

3. 实施工作流（测试驱动开发）

3.1 样式组件的测试驱动开发流程

为每个样式组件遵循此工作流：

步骤 1：先编写失败测试

// tests/components/HUDPanel.test.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HUDPanel from '~/components/HUDPanel.vue'

describe('HUDPanel', () => {
  it('使用正确的 JARVIS 主题类渲染', () => {
    const wrapper = mount(HUDPanel, {
      props: { title: '系统状态' }
    })

    const panel = wrapper.find('[data-testid="hud-panel"]')
    expect(panel.classes()).toContain('bg-jarvis-bg-panel/80')
    expect(panel.classes()).toContain('border-jarvis-primary/30')
    expect(panel.classes()).toContain('backdrop-blur-sm')
  })

  it('应用响应式网格布局', () => {
    const wrapper = mount(HUDPanel)
    const grid = wrapper.find('[data-testid="panel-grid"]')

    expect(grid.classes()).toContain('grid-cols-1')
    expect(grid.classes()).toContain('md:grid-cols-2')
    expect(grid.classes()).toContain('lg:grid-cols-3')
  })

  it('显示正确的状态指示器颜色', async () => {
    const wrapper = mount(HUDPanel, {
      props: { status: 'active' }
    })

    const indicator = wrapper.find('[data-testid="status-indicator"]')
    expect(indicator.classes()).toContain('bg-jarvis-primary')
    expect(indicator.classes()).toContain('animate-pulse')

    await wrapper.setProps({ status: 'error' })
    expect(indicator.classes()).toContain('bg-jarvis-danger')
  })

  it('保持可访问性焦点样式', () => {
    const wrapper = mount(HUDPanel)
    const button = wrapper.find('button')

    expect(button.classes()).toContain('focus:ring-2')
    expect(button.classes()).toContain('focus:outline-none')
  })
})

步骤 2：实施最小化以通过测试

<!-- components/HUDPanel.vue -->
<template>
  <div
    data-testid="hud-panel"
    class="bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4"
  >
    <div
      data-testid="panel-grid"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    >
      <slot />
    </div>
    <span
      data-testid="status-indicator"
      :class="statusClasses"
    />
    <button class="focus:ring-2 focus:outline-none focus:ring-jarvis-primary">
      操作
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title?: string
  status?: 'active' | 'warning' | 'error' | 'inactive'
}>()

const statusClasses = computed(() => ({
  'bg-jarvis-primary animate-pulse': props.status === 'active',
  'bg-jarvis-warning': props.status === 'warning',
  'bg-jarvis-danger': props.status === 'error',
  'bg-gray-500': props.status === 'inactive'
}))
</script>

步骤 3：如有需要，重构

提取重复模式到 @apply 指令：

/* assets/css/components.css */
@layer components {
  .hud-panel {
    @apply bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4;
  }

  .hud-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
  }
}

步骤 4：运行完整验证

# 运行所有样式相关测试
npm run test -- --grep "HUDPanel"

# 检查未使用的 CSS
npx tailwindcss --content './components/**/*.vue' --output /dev/null

# 验证构建大小
npm run build && ls -lh .output/public/_nuxt/*.css

4. 性能模式

4.1 清除优化

// tailwind.config.js
// 好：特定内容路径
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.ts'
  ]
}

// 差：太宽泛，包括未使用文件
export default {
  content: ['./src/**/*']  // 包括测试、故事等
}

4.2 JIT 模式效率

// 好：让 JIT 仅生成使用的实用工具
export default {
  mode: 'jit',  // v3+ 中默认
  theme: {
    extend: {
      // 仅扩展所需内容
      colors: {
        jarvis: {
          primary: '#00ff41',
          secondary: '#0891b2'
        }
      }
    }
  }
}

// 差：定义未使用的变体
export default {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-hover', 'disabled']  // 可能不使用所有
    }
  }
}

4.3 @apply 提取策略

<!-- 好：当模式重复 3+ 次时提取 -->
<style>
@layer components {
  .btn-jarvis {
    @apply px-4 py-2 rounded font-medium transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}
</style>

<!-- 差：@apply 用于单次使用样式 -->
<style>
.my-unique-element {
  @apply p-4 m-2 text-white;  /* 在模板中直接使用实用工具 */
}
</style>

4.4 响应式断点效率

<!-- 好：移动优先，最小断点 -->
<div class="p-2 md:p-4 lg:p-6">
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
</div>

<!-- 差：冗余断点定义 -->
<div class="p-2 sm:p-2 md:p-4 lg:p-4 xl:p-6">
  <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
</div>

4.5 暗模式效率

// 好：单一暗模式策略（JARVIS 始终为暗色）
export default {
  darkMode: 'class',  // 使用 'class' 进行显式控制
  theme: {
    extend: {
      colors: {
        jarvis: {
          bg: {
            dark: '#0a0a0f',  // 直接定义暗色
            panel: '#111827'
          }
        }
      }
    }
  }
}

// 差：当应用始终为暗色时定义亮/暗变体
<div class="bg-white dark:bg-gray-900">  // 不必要的亮色样式

4.6 动画性能

// 好：GPU 加速属性
export default {
  theme: {
    extend: {
      keyframes: {
        glow: {
          '0%, 100%': { opacity: '0.5' },  // opacity 是 GPU 加速的
          '50%': { opacity: '1' }
        }
      }
    }
  }
}

// 差：触发布局重计算的属性
keyframes: {
  resize: {
    '0%': { width: '100px' },  // 触发布局重新计算
    '100%': { width: '200px' }
  }
}

5. 技术栈与版本

5.1 推荐版本

包	版本	备注
tailwindcss	^3.4.0	最新版，带 JIT 模式
@nuxtjs/tailwindcss	^6.0.0	Nuxt 集成
tailwindcss-animate	^1.0.0	动画实用工具

5.2 配置

// tailwind.config.js
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.ts',
    './plugins/**/*.ts'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        jarvis: {
          primary: '#00ff41',
          secondary: '#0891b2',
          warning: '#f59e0b',
          danger: '#ef4444',
          bg: {
            dark: '#0a0a0f',
            panel: '#111827'
          }
        }
      },
      fontFamily: {
        mono: ['JetBrains Mono', 'monospace'],
        display: ['Orbitron', 'sans-serif']
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'scan': 'scan 2s linear infinite',
        'glow': 'glow 2s ease-in-out infinite alternate'
      },
      keyframes: {
        scan: {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' }
        },
        glow: {
          '0%': { boxShadow: '0 0 5px #00ff41' },
          '100%': { boxShadow: '0 0 20px #00ff41' }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-animate')
  ]
}

6. 实施模式

6.1 HUD 面板组件

<template>
  <div class="
    relative
    bg-jarvis-bg-panel/80
    border border-jarvis-primary/30
    rounded-lg
    p-4
    backdrop-blur-sm
    shadow-lg shadow-jarvis-primary/10
  ">
    <!-- 扫描线覆盖层 -->
    <div class="
      absolute inset-0
      bg-gradient-to-b from-transparent via-jarvis-primary/5 to-transparent
      animate-scan
      pointer-events-none
    " />

    <!-- 内容 -->
    <div class="relative z-10">
      <h3 class="
        font-display
        text-jarvis-primary
        text-lg
        uppercase
        tracking-wider
        mb-2
      ">
        {{ title }}
      </h3>
      <slot />
    </div>
  </div>
</template>

6.2 状态指示器

<template>
  <div class="flex items-center gap-2">
    <span :class="[
      'w-2 h-2 rounded-full',
      {
        'bg-jarvis-primary animate-pulse': status === 'active',
        'bg-jarvis-warning': status === 'warning',
        'bg-jarvis-danger animate-ping': status === 'error',
        'bg-gray-500': status === 'inactive'
      }
    ]" />
    <span class="text-sm text-gray-300">{{ label }}</span>
  </div>
</template>

6.3 按钮变体

<template>
  <button :class="[
    'px-4 py-2 rounded font-medium transition-all duration-200',
    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-jarvis-bg-dark',
    {
      'bg-jarvis-primary text-black hover:bg-jarvis-primary/90 focus:ring-jarvis-primary':
        variant === 'primary',
      'bg-transparent border border-jarvis-secondary text-jarvis-secondary hover:bg-jarvis-secondary/10 focus:ring-jarvis-secondary':
        variant === 'secondary',
      'bg-jarvis-danger text-white hover:bg-jarvis-danger/90 focus:ring-jarvis-danger':
        variant === 'danger'
    }
  ]">
    <slot />
  </button>
</template>

7. 质量标准

7.1 可访问性

<!-- 好 - 足够对比度 -->
<span class="text-jarvis-primary"><!-- #00ff41 在暗色背景上 --></span>

<!-- 好 - 焦点可见 -->
<button class="focus:ring-2 focus:ring-jarvis-primary focus:outline-none">

<!-- 好 - 屏幕阅读器文本 -->
<span class="sr-only">状态：活跃</span>

8. 常见错误与反模式

8.1 反模式

避免：过多自定义 CSS

<!-- 差 - 自定义 CSS 时实用工具存在 -->
<style>
.custom-panel {
  padding: 1rem;
  border-radius: 0.5rem;
}
</style>

<!-- 好 - 使用实用工具 -->
<div class="p-4 rounded-lg">

避免：不一致间距

<!-- 差 - 混合间距值 -->
<div class="p-3 mt-5 mb-2">

<!-- 好 - 一致比例 -->
<div class="p-4 my-4">

避免：硬编码颜色

<!-- 差 - 硬编码十六进制 -->
<div class="text-[#00ff41]">

<!-- 好 - 主题颜色 -->
<div class="text-jarvis-primary">

9. 实施前检查清单

阶段 1：编写代码前

• [ ] 为预期类应用编写组件测试
• [ ] 验证 JARVIS 主题颜色在配置中定义
• [ ] 检查内容路径包括所有源文件
• [ ] 审查现有组件以寻找可重用模式

阶段 2：实施期间

• [ ] 在自定义 CSS 前使用实用工具
• [ ] 应用一致间距比例（4, 8, 12, 16…）
• [ ] 包括所有交互元素的焦点状态
• [ ] 在每个尺寸测试响应式断点
• [ ] 使用主题颜色，从不硬编码十六进制值

阶段 3：提交前

• [ ] 所有组件测试通过：npm test
• [ ] 构建完成，无 CSS 错误：npm run build
• [ ] 检查 CSS 包大小未意外增长
• [ ] 验证无未使用的 @apply 提取
• [ ] 使用键盘导航测试可访问性

10. 总结

Tailwind CSS 为 JARVIS 提供实用优先样式：

1. 测试驱动开发：在实施前为类应用编写测试
2. 性能：优化内容路径并使用 JIT 模式
3. 主题：在配置中定义 JARVIS 颜色和字体
4. 实用工具：从实用工具组合样式，用 @apply 提取模式
5. 可访问性：保持焦点状态和足够对比度

记住：JARVIS HUD 具有独特的视觉标识 - 保持与主题配置的一致性，并使用 vitest 测试所有样式。

---

参考资料：

• references/advanced-patterns.md - 复杂布局模式