Styling with TailwindCSS

CSS doesn’t come naturally to me. I can work with CSS if I have to, but it took me a long time to become proficient. Having all the style information in one file, all the structure in another and any interactivity in a third just doesn’t make sense to me. That’s why I was drawn to JavaScript frameworks like React and Vue.

The first JS framework I learned was React. I was impressed. The ability to mix structure and interactivity felt intuitive, and I started using it for every new project. Instead of having an HTML file and a JS file, I just needed one React file. Styling was the only issue I had. I would try to use the style attribute and an object as much as possible, and then kept a catch-all CSS file for everything else. Unfortunately, that didn’t work so well—using a JavaScript object for styling didn’t let me use media queries, selectors, inheritance or any other CSS-specific features. And, having one catch-all CSS file for everything else made it hard to keep track of all the classes and ids, and to know which style was defined where.

When I started to learn Vue, I was immediately impressed by the fact that I could have styles right in the component. Instead of three separate files (structure, interactivity and style), I had one file with three sections. And, the ability to scope classes meant I could use whatever name made sense in that one component, with no danger of it messing up other components.

After working with Vue for a while, I found out about TailwindCSS. It took integration to the next level. Just like how React merged the organizational and interactive parts of a website, TailwindCSS merges the role of CSS with the HTML (or Vue template) by using a series of utility classes. These classes (like m-4, font-bold, flex, or lg:hover:bg-brand-1) let you write styles inline with all the power of CSS. This lets you write all your style right from your HTML, without giving up things like media queries, hover states and advanced selectors. It also removes large stylesheets like Bootstrap would have—TailwindCSS works as a compiler generating the utility classes right from your source code so that it doesn’t include any style it doesn’t need to.

One of the major benefits of TailwindCSS is how much it simplifies making responsive layouts. Normally, the CSS for a reusable section component with two parts might look like this:

.big-section {
  display: grid;
  grid-template-columns: 1fr;
  padding: 3rem 1rem;
  justify-items: center;
  align-items: center;
}

/* Somewhere later in the CSS file */

@media (screen and (min-width: 768px)) {
  .big-section {
    grid-template-columns: 1fr 1fr;
    padding: 3rem 2rem;
  }
}

There are a few issues with this. First of all, where do I put the media query? Do I keep all my styles for a certain screen size together in one media query? If I do so, then the styles for one component are spread across different areas in the file, so I can’t be sure what styles are already set without jumping back and forth in the file. Otherwise, if I put the media query with the other component code, I have to hardcode a screen size to apply the new styles at—for every single component. That could lead to a user experience that lacks cohesion, and it also means a lot of verbose, repeated code. So, how does TailwindCSS solve these issues? This is the same component again as HTML with TailwindCSS utility classes:

<section
    class="grid grid-cols-1 md:grid-cols-2 py-12 px-4 md:px-8 justify-items-center items-center"
  >
  <!-- Section content -->
</section>

Tailwind comes with a finite, configurable set of screen size breakpoints to switch styles on, ensuring a cohesive user experience. And, responsive styles are ridiculously simple: just <size>:<class>, for example md:grid-cols-2 from the example above. It is clear what each class does, so you know exactly what you need to override at another screen size for a responsive design. There is minimal boilerplate, and the building-block classes can be abstracted away into a component. Other modifiers are possible too, like hover, dark (for dark mode), focus, group-hover and many more.

Possibly the best part of Tailwind is its flexibility. It makes it painless to extend and replace styles. Its configuration file lets you hardcode all the reusable colours, sizes, animations, etc. for your site once, and then they can be used in any class. And, when you just need to write CSS for a particular situation, nothing stops you. You can even write your own utility classes so that they can be used along with modifiers like md: and hover:. At the end of the day, the styles are small. For this website, which includes some plugins and custom styles, the final CSS file is less than 10KB compressed, and that’s enough for every single page.

TailwindCSS provides an intuitive and fast way to write your styles. It makes it easier to make responsive layouts with great user experience, and its flexibility allows developers to extend it painlessly. It makes writing styles natural and efficient.