tailwind

HuynhSang2005's avatarfrom HuynhSang2005

Quy ước Tailwind CSS trong repo này (Tailwind v4 CSS-first, tokens, cn(), không hardcode màu).

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026⬇️1downloads
[Code Generation]

When & Why to Use This Skill

This Claude skill automates and enforces Tailwind CSS v4 coding standards within a repository. It ensures a CSS-first workflow, promotes the use of design tokens over hardcoded values, and utilizes the cn() utility for clean class merging. By integrating these specific conventions, it helps developers maintain a consistent UI architecture, streamline theme management via CSS variables, and ensure that all components—including MDX-based content—adhere to the project's design system.

Use Cases

  • Generating new React or UI components that strictly follow Tailwind v4 CSS-first conventions and internal design tokens.
  • Refactoring legacy styles or hardcoded hex colors into standardized theme variables like 'bg-background' and 'text-foreground' to ensure theme consistency.
  • Implementing complex conditional styling using the cn() helper function to prevent class conflicts and improve code readability.
  • Standardizing typography and layout for MDX-based documentation by leveraging centralized CSS utilities instead of scattered inline classes.
  • Onboarding new developers to the codebase by providing an automated guide that prevents common styling mistakes and enforces repo-specific CSS patterns.
nametailwind
descriptionQuy ước Tailwind CSS trong repo này (Tailwind v4 CSS-first, tokens, cn(), không hardcode màu).

Nguồn trong repo

  • Global Tailwind entry + tokens: apps/web/src/styles/globals.css
  • Class merge helper: apps/web/src/lib/utils.ts (cn)
  • Shadcn UI (không sửa): apps/web/src/components/ui/**

Tailwind v4 (CSS-first)

  • Repo dùng @import "tailwindcss"; trong globals.css.
  • Plugins: tailwindcss-animate, @tailwindcss/typography.
  • Theme tokens map qua CSS variables (--color-*) trong @theme inline.

Quy tắc thiết kế

  • Không hard-code màu/font/shadow mới trong component.
  • Dùng tokens hiện có (bg-background, text-foreground, border-border, v.v.).
  • Dùng cn() để merge class conditionally.

Khi cần thêm styles

  • Ưu tiên Tailwind utilities trước.
  • Nếu cần utility riêng, cân nhắc pattern @utility ... trong globals.css (repo đã có).

MDX styles

  • MDX-related styles nằm ở apps/web/src/styles/mdx.css và mdx-editor*.css.
  • Khi đổi typography, ưu tiên chỉnh trong các file này thay vì inline class rải rác.