Duplication

Manage duplication in CSS classes for React and Ruby on Rails frameworks.

A common concern when we’re looking at Tailwind and the long sets of class lists is how to manage duplication. If we need to type class="text-6xl font-bold text-blue-700" for every h1, as we did in the Introduction, that’s a lot of typing that has to be consistent every time there’s an h1 heading.

Manage duplication in code

Tailwind does have a way to manage CSS class list duplication, but we’re also encouraged to see the duplication issue as part of our larger code setup, not only as a CSS issue. No matter what tool we use to build our HTML markup, it likely has component or function mechanisms we’re already using to reduce code duplication. When we use Tailwind, it’s a great idea to see our CSS class lists as part of that code.

Get hands-on with 1200+ tech skills courses.