styling

Apply Tailwind CSS styling to UI components using the SideDish design system.

Updated Dec 15, 2025

Search Tags:#ui #css #styling #component #tailwind #design-system

Ready to run

npx skills add https://github.com/jhlee0409/sidedish --skill styling

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: styling
Source: https://github.com/jhlee0409/sidedish/tree/main/.claude/skills/styling
Command: npx skills add https://github.com/jhlee0409/sidedish --skill styling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind CSS 4를 사용한 일관된 UI 스타일링과 사이드디시 디자인 시스템 적용을 돕습니다.

Core Features & Use Cases

Design System: 색상, 타이포그래피, 버튼 모듈 구성
Glassmorphism & Cards: 글래스몰피스 카드 스타일 샘플
Responsive Patterns: 그리드/레이아웃 기본 패턴

Quick Start

새 카드 컴포넌트에 디자인 시스템 유틸리티 클래스를 적용합니다.

Frequently Asked Questions about styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I apply Tailwind CSS styling to components with a design system?▼

Tailwind CSS styling enforces utility classes to align UI components with design system standards. Apply predefined className patterns for color, typography, spacing, and borders—no inline styles. This ensures consistency across buttons, forms, cards, and layouts while maintaining responsive design.

What is glassmorphism and how do I implement it in Tailwind?▼

Glassmorphism creates frosted-glass card effects using transparency, backdrop blur, and border styling. The SideDish design system provides predefined Tailwind patterns for glassmorphism cards with large border radii (rounded-xl, rounded-2xl) and consistent spacing, ready to apply to card components.

Can I use Tailwind CSS 4 with a custom design system?▼

Yes, Tailwind CSS 4 works with custom design systems. The SideDish system defines reusable utility classes for color palettes, typography scales, button variants, and spacing rules that layer on top of Tailwind, allowing you to maintain design consistency across all components.

How do I build responsive layouts with Tailwind and maintain design consistency?▼

Apply Tailwind's responsive grid and layout patterns combined with SideDish design tokens for color, typography, and spacing. Use predefined button and card variants with large border radii to ensure responsive components scale correctly while adhering to system constraints.

What are the constraints when styling with this design system?▼

The SideDish system requires Tailwind className usage only—inline styles are not permitted. Border radii must be large (rounded-xl, rounded-2xl minimum). Scope is limited to buttons, forms, cards, and animations; other component types follow category-level patterns.