• Here’s a really quick tip. • You can think of Tailwind utilities as components - because you can literally make a card “component” out of Tailwind utilities. • @utility card { border: 1px solid black; padding: 1rlh; } … • This blurs the line between “Components” and “Utilities” so we need to better define those terms. • The Great Divide - and The Great Unification CSS developers often define Components and Utilities like this: - Component = A group of styles - Utility = A single rule This collective thinking has emerged from the terminologies we have gathered over many years. • Unfortunately, they’re not really the right terminologies.

Article Summaries:

  • The article argues that the traditional split between “components” (groups of styles) and “utilities” (single rules) in Tailwind is largely a marketing construct rather than a technical necessity. It proposes treating Tailwind utilities as components by writing them in a dedicated CSS layer, then overriding them with other utilities using Tailwind’s !important modifier directly in markup. This approach eliminates the need for separate component files and reduces clutter from repeated @layer declarations. The author promotes this method through the “Unorthodox Tailwind” course, which teaches a synergistic use of CSS and Tailwind that bypasses the conventional component‑utility divide.

Sources: