Distinguishing “Parts” and “Utilities” in Tailwind

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

@utility card {
  border: 1px stable 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 usually outline Parts and Utilities like this:

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

This collective considering has emerged from the terminologies now we have gathered over a few years. Sadly, they’re not likely the best 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 admittedly extra of a advertising 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 best way they’re generally outlined to date) is that we frequently wish to overwrite part kinds.

It kinda maps this fashion:

• Parts: Teams of kinds
• Utilities: Types used to overwrite part kinds.

Personally, I feel that’s a really slender strategy to outline one thing that really means “helpful.”

Simply overwrite the dang fashion

Tailwind supplies us with an unbelievable characteristic that enables us to overwrite part kinds. To make use of this characteristic, you would need to:

• Write your part kinds in a elements layer.
• Overwrite the kinds through a Tailwind utility.

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

 ... 

However this can be a tedious approach of doing issues. Think about writing @layer elements in your whole part information. There are two issues with that:

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

There’s a greater approach of doing this — we are able to change up the best way we use CSS layers by writing utilities as elements.

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

Then, we are able to 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 approach. When you favored this, there’s much more inside: sensible methods to consider and use Tailwind + CSS that you simply gained’t discover in tutorials or docs.