Patterns to optimize away the verbosity of Tailwind classes?

[lancepollard]

I am new to Tailwind (well, I am still on and using styled-components, SC), but as some have pointed out, refactoring from SC to Tailwind made their mobile PageSpeed Insights score go from 75 (SC) to 90 (Tailwind)! That's a pretty solid improvement. I am debating investing the effort in making the switch, but first I wanted to resolve a concern I and several of my colleagues have about Tailwind verbosity.

Being a newcomer to Tailwind, a big fear is that the verbose class names will make it harder to glean the general structure of the DOM tree when looking at the code. And if you have dynamically generated class names, things become even less readable. It seems like the 2-10+ class names on every DOM element will make it noisy and hard to follow the code. Hoping you can clarify that for me, or show me the way that Tailwind deals with this issue.

Comparison

Tailwind:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
    <button className="rounded px-2.5 border-solid border-2 border-black bg-blue-500 text-white">
      Click me
    </button>
  </div>
</div>

StyledComponents:

Notice here that it is more verbose to define the "styled components", but using them creates a clean and readable semantic DOM.

const Container = styled.div(props => ({
  padding: 24,
  maxWidth: 384,
  marginLeft: 'auto',
  marginRight: 'auto',
  background: 'white',
  borderRadius: 12,
  boxShadow: props.theme.shadows.md,
  display: 'flex',
  alignItems: 'center',
  '& > * + *': {
    marginLeft: 16,
  }
}))

const Details = styled.div({
  flexShrink: 1,
})

const Message = styled.p(props => ({
  color: props.theme.colors.text.gray,
}))

const Button = styled.button({
  padding: 10,
  border: '2px solid black',
  borderRadius: 4,
  background: 'blue',
  color: 'white'
})

<Container>
  <h1>Title</h1>
  <Details>
    <Message>You have a new message!</Message>
    <Button>Click me</Button>
  </Details>
</Container>

So SC wins at being more readable in my option. But, like mentioned before, Tailwind has other pros like being more performant on mobile and such. So hard to weigh the differences.

Question

How can you achieve highly readable and sort of "semantic" style code in Tailwind that matches or exceeds the strengths of styled-components? What is the best way to build an abstraction around Tailwind classes so they don't sort of add a lot of extra details in the middle of your DOM, which seems like it would make it harder to get an overall picture of what is happening in the DOM.

Thank you for your help and insight!

[wongjn]

Personally, Tailwind makes it easier for me to see how to see the HTML is themed, since the "CSS" is right there with the HTML. If it gets a bit unwieldly, you could consider abstracting some elements to some components if you are using a templating system, but do try to avoid the pitfall of premature abstraction.

[lancepollard]

Can you elaborate on how it makes it easier? Maybe I can use your points to convince the team one way or another :)

[wongjn]

Again, this is personal preference but for me, it means I don't have to "context switch" between editing CSS and the templates. So when I am building a UI, before Tailwind, I'd have to do some workflow like:

1. Think up the layout in my head.
2. Give a name to to the component as a class and/or file name.
3. Switch to CSS, write a rule for the class from step 2.
4. Repeat steps 2–3 for each single element within the component, maybe even needing to refactor halfway through. Did I name that thing __title, __header or __heading? Now I need to cross-reference my CSS with my templates again,
5. etc.

Whereas with Tailwind, it's more like:

1. Think up the layout in my head.
2. Give a name to to the component as a file name.
3. Write the template out, no context switching needed. I'm always building, less time, brain power and "admin" effort needed to cross-reference arbitrary class names or what CSS declarations a class name applies. I'm confident when refactoring since I can plainly see what CSS a HTML element has.

[therealparmesh]

This:

<button className="rounded px-2.5 border-solid border-2 border-black bg-blue-500 text-white">

And this:

const Button = styled.button({
  padding: 10,
  border: '2px solid black',
  borderRadius: 4,
  background: 'blue',
  color: 'white'
})

Are basically the same amount of verbosity, but the latter includes newlines and commas.

If you abstract the <button> from the former out to <Button> like you do for the latter by calling styled.button(), you'll end up with similar aesthetics in your resulting JSX.