mcpField
T
tailwindcss

tailwindcss

github.com/dajo-code设计与 UI137 次安装42 周前更新
代码仓库

关于 tailwindcss

提供 Tailwind CSS v4 界面构建模式的设计技能，涵盖 CSS 优先配置、组件、动画、暗色模式与无障碍实践。适合需要参考现代 UI 样式和实现模式的开发者。

主要功能

  1. 01使用 CSS 优先主题配置
  2. 02提供组件样式模式
  3. 03涵盖容器查询与动画
  4. 04支持暗色模式设计
  5. 05包含无障碍实践

适用场景

  1. 01为应用设置 Tailwind v4 主题
  2. 02构建卡片和按钮样式
  3. 03制作响应式容器查询布局
  4. 04设计兼顾无障碍的交互

安装

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

$npx skills add https://github.com/dajo-code/midnight-dev-skills --skill tailwindcss

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

详细介绍

Tailwind CSS v4

Tailwind CSS v4 引入了以 CSS 为先的配置、OKLCH 颜色和更出色的性能。 此技能提供构建现代 UI 的全面模式。

核心概念

以 CSS 为先的配置

Tailwind v4 使用 CSS 变量和 @theme 指令，而非 tailwind.config.js：

/* app.css */
@import 'tailwindcss';

@theme {
  /* Colors using OKLCH for better perceptual uniformity */
  --color-primary-50: oklch(0.97 0.01 250);
  --color-primary-100: oklch(0.93 0.03 250);
  --color-primary-500: oklch(0.55 0.2 250);
  --color-primary-900: oklch(0.25 0.1 250);

  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --spacing-18: 4.5rem;
  --spacing-128: 32rem;

  /* Border radius */
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Shadows */
  --shadow-soft: 0 2px 15px -3px oklch(0 0 0 / 0.1);

  /* Animations */
  --animate-fade-in: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
新的变体语法

<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3">
    
  </div>
</div>


<div class="not-first:mt-4">...</div>
<div class="not-last:border-b">...</div>


<div class="group/sidebar">
  <div class="group-hover/sidebar:visible">...</div>
</div>


<div class="has-[:checked]:bg-blue-100">
  <input type="checkbox" />
</div>

组件模式

卡片组件
<div
  class="rounded-2xl bg-white p-6 shadow-soft
            ring-1 ring-black/5
            dark:bg-gray-900 dark:ring-white/10"
>
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Card Title</h3>
  <p class="mt-2 text-gray-600 dark:text-gray-400">Card description text</p>
</div>
按钮变体

<button
  class="rounded-lg bg-primary-500 px-4 py-2
               font-medium text-white
               hover:bg-primary-600
               focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-primary-500
               active:scale-[0.98] transition-all"
>
  Primary Button
</button>


<button
  class="rounded-lg bg-gray-100 px-4 py-2
               font-medium text-gray-900
               hover:bg-gray-200
               dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
>
  Secondary Button
</button>


<button
  class="rounded-lg border border-gray-300 px-4 py-2
               font-medium text-gray-700
               hover:bg-gray-50
               dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
>
  Outline Button
</button>
表单输入框
<div>
  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Email </label>
  <input
    type="email"
    class="mt-1 block w-full rounded-lg border-gray-300
           shadow-sm focus:border-primary-500 focus:ring-primary-500
           dark:border-gray-600 dark:bg-gray-800 dark:text-white
           invalid:border-red-500 invalid:ring-red-500"
    placeholder="[email protected]"
  />
</div>

响应式设计

断点参考
  • sm：640px
  • md：768px
  • lg：1024px
  • xl：1280px
  • 2xl：1536px
移动优先网格
<div
  class="grid grid-cols-1 gap-6
            sm:grid-cols-2
            lg:grid-cols-3
            xl:grid-cols-4"
>
  
</div>
容器查询
<div class="@container">
  <article class="flex flex-col @md:flex-row @md:items-center gap-4">
    <img class="w-full @md:w-48 rounded-lg" />
    <div class="flex-1">
      <h2>Title</h2>
      <p class="hidden @lg:block">Extended description</p>
    </div>
  </article>
</div>

动画模式

悬停效果
<a class="group relative inline-block">
  <span class="relative z-10">Hover me</span>
  <span
    class="absolute inset-0 -z-10 scale-x-0 bg-primary-100
               transition-transform origin-left
               group-hover:scale-x-100 rounded-lg"
  />
</a>
加载状态

<div
  class="animate-spin h-5 w-5 border-2 border-primary-500
            border-t-transparent rounded-full"
/>


<div class="animate-pulse space-y-3">
  <div class="h-4 bg-gray-200 rounded w-3/4" />
  <div class="h-4 bg-gray-200 rounded w-1/2" />
</div>


<div class="relative overflow-hidden bg-gray-200 rounded">
  <div
    class="absolute inset-0 -translate-x-full
              bg-gradient-to-r from-transparent via-white/50 to-transparent
              animate-[shimmer_2s_infinite]"
  />
</div>

深色模式


<html class="dark:bg-gray-950">
  
  <html class="dark">
    <body class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100"></body>
  </html>
</html>

@theme {
  /* Semantic color tokens */
  --color-surface: white;
  --color-on-surface: oklch(0.2 0 0);
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-surface: oklch(0.15 0 0);
    --color-on-surface: oklch(0.9 0 0);
  }
}

无障碍

焦点样式
<button
  class="focus:outline-none
               focus-visible:ring-2
               focus-visible:ring-primary-500
               focus-visible:ring-offset-2"
>
  Accessible Button
</button>
仅供屏幕阅读器使用
<span class="sr-only">Navigation menu</span>
动效偏好设置
<div class="animate-bounce motion-reduce:animate-none">Respects reduced motion</div>

参考资料

资源

评论

支持 Markdown