Frontend CSS

Style React components by applying Tailwind CSS utility classes directly to className attributes in your .tsx files. Use the custom @imkdw-dev/ui preset, which includes semantic color tokens like bg-card and text-foreground, alongside the cn() utility to resolve class conflicts and ensure consistent styling across your project.

Implement dark mode by leveraging CSS variables (--background, --foreground, --primary) and applying the .dark class to toggle between light and dark themes. Tailwind CSS automatically respects these variables in your configuration, allowing your UI to adapt seamlessly without manual style duplication.

Yes, this Skill supports custom animations defined in tailwind.config.ts, including fade-in, slide-up, and terminal-blink. Reference them directly in className attributes to add motion to components without writing custom CSS.

Use semantic CSS variables and the custom Tailwind preset to define and manage design tokens centrally in tailwind.config.ts. This approach ensures consistent theming, reduces style conflicts, and makes dark mode and design system updates propagate instantly across all components.

Yes, the @tailwindcss/typography plugin is included and enables styled prose for rich content rendering. Combine it with terminal and code syntax colors to style markdown, documentation, or code blocks consistently within your design system.

The cn() utility resolves class conflicts and merges Tailwind classes intelligently, preventing specificity bugs and style clashes. It ensures predictable output when combining conditional classes and respects your design system's preset rules.