frontend-dev-guidelines-tailwind

Use functional components with typed props and apply Tailwind utility classes directly in JSX. For repeated patterns, extract classes with @apply or use the cn() helper combining clsx and tailwind-merge for conditional class names.

Use React Hook Form with the zodResolver to validate inputs against a Zod schema. Define the schema with z.object(), infer the TypeScript type with z.infer, and display errors from formState.errors next to each field.

The cn() helper combines clsx and tailwind-merge to conditionally join class names while resolving Tailwind class conflicts. It lets you write cn("rounded-lg p-4", isActive && "bg-blue-100") without duplicate or overriding utilities.

Yes, Shadcn/ui components support dark mode through Tailwind's dark: variant and CSS variables. Toggle a theme class on a parent element, typically via a Context provider, and components styled with dark: utilities update automatically.

Use useMemo for expensive computations that depend on stable inputs, useCallback for callbacks passed to memoized children, and memo() for components that re-render often with identical props. Avoid memoizing everything since it adds overhead.

Use virtual scrolling with @tanstack/react-virtual to render only visible items. The useVirtualizer hook calculates item positions and sizes, so a list of thousands of rows only mounts the DOM nodes currently in the viewport.