Co-locate, no side effects

Style on the element itself, so a change touches one place.

Adam Wathan@adamwathan
I doubt it, I'm guessing it would have a harder time trying to work with someone's bespoke spaghetti CSS, but I think that's already true when working with LLMs in general (and for humans too 😄) Tailwind's co-location and lack of side effects just makes it much easier for LLMs to do a good job 👍🏻
Dec 11, 2025View on X ↗
Adam Wathan@adamwathan
@JacobBennett @jeffrey_way personally hate that 😬 hard to grep when a class in your html doesn't actually exist as a string in your styles
Mar 26, 2016View on X ↗

Demo 2 models the nested-selector case from the second post.

Change one button

Round the Save button, then read what else moved.

Shared classBad
Own classesGood
<button class="rounded-full px-3 py-1.5 bg-black text-white">Save</button>
<button class="rounded-md px-3 py-1.5 border">Cancel</button>
<button class="rounded-md px-3 py-1.5 bg-red-600 text-white">Delete</button>

Grep what you see

Search a class from the markup. Edit the box to try others.

Nested selectorsBad
Class is the stringGood

Why it matters, pros and cons

Why it matters

A class that means one thing on one element cannot break a distant element.

Pros

  • An edit touches the element you are looking at.
  • Grep finds the string you see in the markup.
  • Deleting an element deletes its styles too.

Cons

  • Repeated class lists need a component to stay in sync.
  • Changing a look everywhere means editing every place.
  • Long class strings take some getting used to.