tailwindcss

Use responsive variant prefixes like sm:, md:, lg:, and xl: before utility classes to apply styles at different breakpoints. For example, `grid gap-10 lg:grid-cols-2` stacks content on mobile and switches to two columns on large screens.

Map dynamic values to complete static class strings using a lookup object instead of string concatenation like `"text-" + color`. Tailwind scans source files for full class names, so dynamically built strings are not generated unless safelisted.

Missing classes usually mean the content configuration does not include all template and component file paths, or class names were constructed dynamically at runtime. Ensure every file containing classes is listed in the content array and avoid string-built class names.

Yes, Tailwind supports dark mode through the `dark:` variant, typically using a class-based strategy where a `dark` class on a parent element toggles dark styles. Apply classes like `dark:bg-zinc-900` alongside light defaults.

Prefer extracting repeated markup into framework components (JSX/Vue) first, since composition preserves the utility-first workflow. Reserve `@apply` for small reusable patterns, as overusing it recreates bespoke CSS and loses utility-first benefits.