How to Use Tailwind With BEM

If you're looking for a simple approach to creating modular CSS code, the Block, Element, Modifier methodology (or BEM) has been a great place to start for a long time.

Two thousand twenty, things changed a little, and utility-first CSS frameworks were confirmed as the way to go when the State of CSS reported Tailwind CSS as the hottest utility-first CSS framework on the scene.

Now, many of us are still a little reluctant to use the Tailwind approach. That left me (and a few other developers) wondering how I can retain the benefits of using BEM in my projects while adopting the new Tailwind approach.

I began to think about how these frameworks could work together. In this blog, I'll show you how to merge the "King of Utility" with the "best of Modular CSS" to create a handy combination for you to use on your projects.

Let's start with a quick reminder of how the BEM and utility-first approaches look in practice. 

The BEM methodology.

As mentioned, this methodology is based on three key things: Block, Element and Modifier. 

Image source: BEM

Block

Other examples of standalone entities are footers and navigation menus. 

Element

This can also be a header logo, footer link or button label. 

Modifier

Other descriptions of a block or element's special behaviour could include active, disabled, underlined, or large.

Example of a button:

<footer class=”footer”>

    <button class=”footer_button”>Default Button</button>

    <button class=”footer_button--larger”>Large Button</button>

</footer>

The utility-first methodology: Tailwind. 

This approach assumes that the framework is packed with many classes, such as text-center, mt-5, text-black, flex, and rotate-90, that can be composed to style any element directly in the markup.

Example of a button: 

<button class=”text-center text-black my-5 border-black”>Button text</button>

As you can see, this approach allows you to create any designed element very fast. It is easy and intuitive to use and will enable you to build any design without writing any code.

But here we come to the main disadvantage (that scares many of you away). Markup in the Tailwind approach doesn't look as clean and readable, with many classes assigned to elements.

Do. Not. Worry.  

There is a cool feature in Tailwind, the @apply directive that allows you to change this approach a bit and help you regain control of the markup. It will allow you to extract common utility patterns from CSS component classes.

Example of a button:

.button {

    @apply text-center text-black my-5 border-black;

}

And that's it! You can go a step further and use this directive and apply BEM again:

.button--red {
    @apply .button bg-red;
}

As Tailwind is based on its config file (tailwind.config.js), it contains all general settings like breakpoints, colours, and font sizes, which means you don't need to keep those things in CSS variables any more. Using the above method, I now have a similar configuration file with the same structure in different projects, which boosts efficiency, productivity, and organisation as other developers can quickly dive into new tasks.

I'm delighted with how this combination works, and I hope I've encouraged you to give Tailwind and BEM a chance to meet on your projects.