Intro to Styling Custom UIs with Tailwind Utility Classes

Tailwind comes with pre-built, single-purpose CSS classes called utility classes that you use to style your application. If you’ve never used a utility-first approach before, you’ll be surprised at just how far you can get building a completely custom UI using only Tailwind’s defaults.

In this lesson we’ll style a message component from Discord. You’ll see how Tailwind lets us tweak our design directly from our template, all without having to write a single line of CSS ourselves. Because Tailwind’s utility classes live right alongside our markup, we won’t need to come up with any new naming patterns or conventions to keep our styling code maintainable.

This co-location of styles and markup is one of the biggest benefits of Tailwind, since it lets teams decide for themselves how best to break up their UIs – and their Tailwind styling code simply comes along for the ride.