Hi! I’m a frontend tech guild lead at m+p where we strive to create top-quality software that not only creates a great impression for the user, but also utilises best practices and feels healthy under the hood.

In this article, I’m going to share how we use Tailwind CSS with Vue.js to create modular and maintainable styles for our components. I will cover the following topics:

• Why Tailwind?

• Why to avoid using utility classes directly in the HTML class attribute?

• How to compile Tailwind CSS utility classes into named classes?

• How Vue.js helps us to achieve even better results?

Why Tailwind?

Tailwind CSS is a popular CSS framework that is based on the utility-first approach. This means that instead of providing pre-designed components and classes, Tailwind CSS provides a set of low-level utility classes that can be composed together to create custom designs. This allows developers to quickly prototype and build custom user interfaces without having to write a lot of CSS code.

Suppose we want to create a button with the following styles:

• Bold font

• Padding of 16 pixels

• Rounded corners

• Blue background color

With traditional CSS, we would need to write the following code to apply those styles to a <button> element:

button {  font-weight: bold; padding: 16px; border-radius: 4px; background-color: #3490dc;}

However, with Tailwind CSS, we can use the utility classes provided by the framework to apply those styles with less code. We can use the font-bold, py-4, rounded, and bg-blue-500 classes like this:

<button class="font-bold py-4 rounded bg-blue-500">Click me!</button>

This will apply the same styles to the <button> element, but with less code. The utility classes provided by Tailwind CSS can be composed together to create a wide range of designs, which can help us avoid writing a lot of CSS from scratch.

Why to avoid using utility classes directly in the HTML class attribute?

As demonstrated in the example above font-bold, py-4, rounded, and bg-blue-500 utility classes are put directly to the HTML class attribute. This is the approach that Tailwind recommends and official Tailwind UI library follows.

But our experience at M&P considered best practice to avoid doing so, as this can lead to a number of problems. Here are a few reasons why we think compiling Tailwind CSS utility classes into named classes and using those classes in HTML is better:

1. Maintainability. Putting utility classes directly in the HTML class attribute can make code difficult to maintain. For example, if we want to change or remove a utility class, we would need to go through HTML code and update every instance of that class. This can be time-consuming and error-prone. By using named classes, we can easily make changes to our styles in one place and have those changes automatically propagate.

2. Reusability. Putting utility classes directly in the HTML class attribute can make it difficult to reuse styles. For example, if we have a set of utility classes that we use frequently, we would need to copy and paste those classes into the HTML class attribute every time we want to reuse them. This can lead to code duplication and make our code harder to read. By using named classes, we can easily reuse our class names and avoid duplication.

3. Performance. Putting utility classes directly in the HTML class attribute can affect the performance of a website. When a browser parses such HTML, it needs to look up each utility class in the stylesheet and apply the associated styles. While this is usually pretty fast we can improve it further by using named classes.

How to compile Tailwind CSS utility classes into named classes?

To compile Tailwind CSS utility classes into named classes, we can use the @apply directive in our stylesheet. For example, if we have a set of utility classes that we want to reuse, we can compile those classes into a named class like this:

.btn {  @apply font-bold py-2 px-4 rounded;}

To use the named .btn class in our Vue component, we can add it to the class attribute of an element in our template. For example:

<template>  <button class="btn">Click me!</button></template>

This will apply the styles associated with the .btn class to the <button> element. We can then use the .btn class in any other Vue component where we want to use those styles.

How Vue.js helps us to achieve even better results?

While above-mentioned advice can be considered common for any framework you use with Tailwind, our experience of using it with Vue.js allows getting the last missing bit: scoped CSS.

Scoped styles feature in Vue.js allows defining styles that are specific to a particular component and will not affect the styles of other components. This helps us to avoid conflicts and specificity issues, allowing to reuse the components easily.

When using scoped styles, the styles defined in the <style> tag of a Vue component will only apply to that component and its child components. This means that the styles will not leak out to the rest of the application, and will not conflict with the styles of other components.

And this adds other benefits on top of the list:

• Modularity. By using Vue scoped styles, we can define styles that are specific to a particular component. We no longer need to think of a class name to be unique throughout the whole application. Instead, we just make sure it’s unique in one file.

• Simplicity. Sometimes we need to safelist utilities with Vue.js because Tailwind cannot easily detect them to keep in the resulting bundle. If we use named classes, this problem is simply gone.

So while it’s still possible to use Tailwind CSS utility classes directly in the HTML class attribute, our coding guideline recommends compiling those classes into named classes and use those classes in HTML instead.

We have quite some experience using a powerful combination of Tailwind CSS and Vue.js and utilizing named classes helps us to write more maintainable, reusable, performant code. Styles are better organized and modular, making it easier to understand and support.

This article was written with the help of ChatGPT. Not fully written by AI, and heavily edited, but still worth mentioning 🙂