styling

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.

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.

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.

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.

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.