Try it, then go back

Judge a tool by using it, then by returning to the old way.

Adam Wathan@adamwathan
It's hard to appreciate a utility-first CSS workflow until you actually try it. But the moment that *really* wins you over is when you have to go back and work on a site you built the traditional way. It's torture.
Mar 23, 2018View on X ↗
Adam Wathan@adamwathan
Building some of @steveschoger latest Tailwind UI concepts this afternoon... Honestly still blows me away that with Tailwind I can build this whole thing in like two hours, really ain't that bad of a framework 💅
Dec 15, 2020View on X ↗

The demo counts real lines in the code shown; it is not a speed test.

Make three design changes

Toggle a change above and count the lines each pane needs.

Rule per partBad

        
Last changenoneLines edited0

      

      

        
Utility componentsGood

        

        
Last changenoneLines edited0

      

    

    
const control = "rounded-md px-3.5 py-2";
const surface = "rounded-md p-3.5";
const accent  = "bg-sky-600 text-white";

<Button className={`${control} ${accent}`} />
<Input  className={control} />
<Badge  className={`rounded-md ${accent}`} />

  


  

    
Why it matters, pros and cons

    

      
Why it matters
Building feels good in both styles. The cost shows up later, when you return to change something.

      
Pros
    
        
  • The return trip is where the comparison becomes real.
    • 
        
  • A design change is a count of lines, not an opinion.
    • 
        
  • Local styles make the edit as small as the idea.
    • 
      

      
Cons
    
        
  • Shared components can be just as easy to change in any CSS.
    • 
        
  • A stylesheet you know well beats a system you barely know.
    • 
        
  • One small change is a thin sample; try a real one.
    •