pos-system/microservices/.agent/skills/tailwind-design-system/SKILL.md

name, description, compatibility, metadata

name	description	compatibility	metadata
tailwind-design-system	Tailwind CSS 4 design system patterns cho GoodGo frontends. Use for CSS variables theming, dark mode, glassmorphism, brand colors, typography, và responsive patterns.	tailwindcss>=4, postcss>=8	author version Velik Ho 1.0

Tailwind Design System / Hệ Thống Design Tailwind

When to Use This Skill / Khi Nào Sử Dụng

Use this skill when:

• Creating design tokens / Tạo design tokens
• Implementing dark mode / Triển khai dark mode
• Using glassmorphism effects / Sử dụng glassmorphism
• Working with brand colors / Làm việc với brand colors
• Building responsive layouts / Xây dựng layouts responsive

Core Concepts / Khái Niệm Cốt Lõi

CSS Variables First (Tailwind CSS 4)

Tailwind CSS 4 uses CSS-first configuration with @theme directive.

/* src/styles/theme.css */
@theme {
  /* Color tokens */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #141414;
  --color-text-primary: #fafafa;
  --color-accent-primary: #3b82f6;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  
  /* Border radius */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

Key Patterns / Mẫu Chính

Color Tokens

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: {
          primary: 'var(--bg-primary)',
          secondary: 'var(--bg-secondary)',
          tertiary: 'var(--bg-tertiary)',
          elevated: 'var(--bg-elevated)',
        },
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          tertiary: 'var(--text-tertiary)',
        },
        accent: {
          primary: 'var(--accent-primary)',
          success: 'var(--accent-success)',
          warning: 'var(--accent-warning)',
          error: 'var(--accent-error)',
        },
        brand: {
          primary: {
            DEFAULT: 'var(--brand-primary)',
            light: 'var(--brand-primary-light)',
            dark: 'var(--brand-primary-dark)',
          },
        },
      },
    },
  },
};

Dark Mode Pattern

/* theme.css */
:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
}

[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --text-primary: #fafafa;
}

// tailwind.config.js
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  // ...
};

// Usage in component
<div className="bg-bg-primary text-text-primary">
  {/* Automatically adapts to theme */}
</div>

Glassmorphism Utilities

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        glass: {
          bg: 'var(--glass-bg-default)',
          'bg-subtle': 'var(--glass-bg-subtle)',
          'bg-hover': 'var(--glass-bg-hover)',
          border: 'var(--glass-border-default)',
        },
      },
      backdropBlur: {
        glass: 'var(--glass-blur-md)',
        'glass-lg': 'var(--glass-blur-lg)',
      },
      boxShadow: {
        glass: 'var(--glass-shadow-md)',
        'glass-lg': 'var(--glass-shadow-lg)',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.glass-panel': {
          background: 'var(--glass-bg-default)',
          'backdrop-filter': 'blur(var(--glass-blur-md))',
          border: '1px solid var(--glass-border-default)',
          'box-shadow': 'var(--glass-shadow-md)',
        },
      });
    },
  ],
};

// Usage
<div className="glass-panel rounded-lg p-4">
  Glassmorphism effect
</div>

// Or custom glass
<div className="bg-glass-bg backdrop-blur-glass border border-glass-border shadow-glass rounded-xl">
  Custom glass
</div>

Typography Scale

// tailwind.config.js
fontSize: {
  'xs': ['var(--text-xs)', { lineHeight: '1.5' }],
  'sm': ['var(--text-sm)', { lineHeight: '1.5' }],
  'base': ['var(--text-base)', { lineHeight: '1.5' }],
  'lg': ['var(--text-lg)', { lineHeight: '1.5' }],
  'xl': ['var(--text-xl)', { lineHeight: '1.4' }],
  '2xl': ['var(--text-2xl)', { lineHeight: '1.3' }],
  '3xl': ['var(--text-3xl)', { lineHeight: '1.2' }],
},
fontWeight: {
  normal: 'var(--font-normal)',
  medium: 'var(--font-medium)',
  semibold: 'var(--font-semibold)',
  bold: 'var(--font-bold)',
},

Spacing Scale

// tailwind.config.js
spacing: {
  '0': 'var(--space-0)',
  '1': 'var(--space-1)',
  '2': 'var(--space-2)',
  '3': 'var(--space-3)',
  '4': 'var(--space-4)',
  '6': 'var(--space-6)',
  '8': 'var(--space-8)',
  '12': 'var(--space-12)',
  '16': 'var(--space-16)',
  'sidebar': 'var(--sidebar-width)',
},

Animation Tokens

// tailwind.config.js
transitionTimingFunction: {
  smooth: 'var(--motion-ease-smooth)',
  glide: 'var(--motion-ease-glide)',
},
transitionDuration: {
  instant: 'var(--motion-duration-instant)',
  quick: 'var(--motion-duration-quick)',
  normal: 'var(--motion-duration-normal)',
},

Responsive Patterns

// Mobile-first responsive
<div className="
  p-4 md:p-6 lg:p-8
  text-base md:text-lg
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  gap-4 md:gap-6
">
  {/* Content */}
</div>

// Container pattern
<div className="max-w-container-lg mx-auto px-4 md:px-6">
  {/* Centered content */}
</div>

Brand Gradients

// tailwind.config.js
backgroundImage: {
  'brand-gradient': 'var(--brand-gradient-primary)',
  'brand-gradient-accent': 'var(--brand-gradient-accent)',
},

// Usage
<button className="bg-brand-gradient text-white">
  Gradient Button
</button>

Common Mistakes / Lỗi Thường Gặp

1. Hardcoding Colors

// ❌ BAD: Hardcoded color
<div className="bg-[#1a1a1a] text-[#fafafa]">

// ✅ GOOD: Use design tokens
<div className="bg-bg-primary text-text-primary">

2. Not Using CSS Variables

/* ❌ BAD: Static values */
.button { background: #3b82f6; }

/* ✅ GOOD: CSS variables for theming */
.button { background: var(--accent-primary); }

3. Inconsistent Spacing

// ❌ BAD: Arbitrary values
<div className="p-[13px] m-[7px]">

// ✅ GOOD: Use spacing scale
<div className="p-3 m-2">

Quick Reference / Tham Chiếu Nhanh

Token	Usage
bg-bg-*	Background colors
text-text-*	Text colors
bg-accent-*	Accent backgrounds
border-border-*	Border colors
glass-panel	Glassmorphism preset
bg-brand-gradient	Brand gradient
backdrop-blur-glass	Glass blur
shadow-glass	Glass shadow

Resources / Tài Nguyên

• React UI Components - Component patterns
• Tailwind CSS Docs
• Design Tokens Spec