Distinguishing “Parts” and “Utilities” in Tailwind

Right here’s a extremely fast tip. You possibly can consider Tailwind utilities as elements — as a result of you may actually make a card “element” out of Tailwind utilities.

@utility card {
  border: 1px strong black;
  padding: 1rlh;
}

 ... 

This blurs the road between “Parts” and “Utilities” so we have to higher outline these phrases.

The Nice Divide — and The Nice Unification

CSS builders typically outline Parts and Utilities like this:

1. Part = A gaggle of kinds
2. Utility = A single rule

This collective considering has emerged from the terminologies we’ve gathered over a few years. Sadly, they’re not likely the appropriate terminologies.

So, let’s take a step again and take into account the precise which means behind these phrases.

Part means: A factor that’s part of a bigger complete.

Utility means: It’s helpful.

So…

• Utilities are Parts as a result of they’re nonetheless half of a bigger complete.
• Parts are Utilities as a result of they’re helpful.

The division between Parts and Utilities is de facto extra of a advertising and marketing effort designed to promote these utility frameworks — nothing greater than that.

It. Actually. Doesn’t. Matter.

The significant divide?

Maybe the one significant divide between Parts and Utilities (in the way in which they’re generally outlined to this point) is that we regularly need to overwrite element kinds.

It kinda maps this manner:

• Parts: Teams of kinds
• Utilities: Kinds used to overwrite element kinds.

Personally, I believe that’s a really slender solution to outline one thing that truly means “helpful.”

Simply overwrite the dang type

Tailwind gives us with an unimaginable function that enables us to overwrite element kinds. To make use of this function, you would need to:

• Write your element kinds in a elements layer.
• Overwrite the kinds by way of a Tailwind utility.

@layer elements {
  .card {
    border: 1px strong black;
    padding: 1rlh;
  }
}

 ... 

However it is a tedious means of doing issues. Think about writing @layer elements in your whole element recordsdata. There are two issues with that:

1. You lose the flexibility to make use of Tailwind utilities as elements
2. You gotta litter your recordsdata with many @layer element declarations — which is one further indentation and makes the entire CSS slightly tougher to learn.

There’s a greater means of doing this — we will swap up the way in which we use CSS layers by writing utilities as elements.

@utility card {
  padding: 1rlh; 
  border: 1px strong black;
}

Then, we will overwrite kinds with one other utility utilizing Tailwind’s !essential modifier straight within the HTML:

 ... 

I put collectively an instance over on the Tailwind Playground.

Unorthodox Tailwind

This text comes straight from my course, Unorthodox Tailwind, the place you’ll be taught to make use of CSS and Tailwind in a synergistic means. For those who appreciated this, there’s much more inside: sensible methods to consider and use Tailwind + CSS that you just received’t discover in tutorials or docs.