designing-components

Create reusable UI components by placing them in `srs/components` with a separate CSS file using Tailwind's `@apply` and `@layer components` directives. This approach ensures consistency and modularity across your Next.js application while following Tailwind v4 best practices.

Organize component styling by creating dedicated CSS files alongside components in `srs/components`, using `@layer components` for component definitions and nested classes for parent-child element relationships. This structure maintains a clean codebase and enforces Tailwind conventions.

Yes, `@apply` and `@layer components` are core Tailwind v4 directives for building modular components. Use `@layer components` to define custom component classes and `@apply` to compose utility combinations within separate CSS files alongside your component definitions.

Implement nested classes in your component CSS file using `@layer components` with selectors for parent and child elements. Add custom utilities and variants as needed to handle complex styling relationships while keeping your component structure maintainable.

Avoid modifying `srs/components/ui` directly; instead, create new components in the `srs/components` root with separate CSS files. Keep component logic isolated and maintain adherence to Tailwind v4 documentation for consistency across your frontend.