Styling Guidelines

Tailwind CSS styling patterns with mandatory eb- prefix for embedded components. This skill ensures consistent styling and prevents style conflicts when components are embedded in other applications.

When to Apply

Reference these patterns when:

• Applying Tailwind CSS classes to components
• Creating responsive layouts
• Working with design tokens
• Implementing loading states
• Creating accessible UI components

⚠️ CRITICAL: eb- Prefix Requirement

ALL Tailwind CSS classes MUST be prefixed with eb-. This is mandatory for the embedded components library to avoid style conflicts when embedded in other applications.

Quick Reference

Essential Rules

• ✅ Always use eb- prefix - No exceptions
• ✅ Mobile-first - Start with mobile, add breakpoints
• ✅ Use semantic colors - Prefer eb-bg-primary over eb-bg-blue-500
• ✅ Skeleton components - Never use "Loading..." text
• ✅ Design tokens - Use semantic color tokens from theme

Common Patterns

// Layout
className="eb-flex eb-items-center eb-gap-4"

// Responsive
className="eb-text-sm md:eb-text-base lg:eb-text-lg"

// Semantic colors
className="eb-bg-primary eb-text-primary-foreground"

How to Use

For detailed instructions, examples, and patterns:

• Full guide: AGENTS.md - Complete styling documentation

References

• See embedded-components/DESIGN_TOKENS.md for design system
• See embedded-components/tailwind.config.js for configuration
• See AGENTS.md for complete styling documentation