InnerWorks Logo
Return to main siteReturn to main site
Blogs

How to Use Tailwind With BEM

How to Use Tailwind With BEM

Wojciech Krzysztofik

20 Jan 2021 • 3 min read

Merge the King of Utility with the best of Modular CSS to create a brilliant combination for your projects.

Hello, youve stumbled into the old Cogblog archives

We've switched our blogging focus to our new Innerworks content, where tech community members can share inspiring stories, content, and top tips. Because of this, old Cogworks blogs will soon be deleted from the site, so enjoy it while you can. A few of these might refer to images in the text, but those have been deleted already sorry. Some of these subjects will return, some aren't relevant anymore, and some just don't fit the unbiased community initiative of Innerworks.

If you'd like to take on this subject yourself please submit a new blog!

Farewell Cogworks Blog 💚

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.

In 2020, 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, a lot of us are still a little reluctant to use the Tailwind approach. That left me (and a few other developers) wondering how I can hold onto the benefits of using BEM in my projects whilst 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 I mentioned at the beginning, 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 the special behaviour of a block or element could be 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 a lot of classes like 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, plus it allows you to build any design without writing any line of 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 so many classes being assigned to elements.

Do. Not. Worry.  

There is a cool feature in Tailwind, @apply directive, that allows you to change this approach a little bit and helps to take back control of the markup. It will allow you to extract common utility patterns to 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 my above method, I now have a similar configuration file with the same structure in different projects, which provides a welcomed boost in efficiency, productivity, and organisation as other developers can quickly dive into new tasks.

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

 

Community tech aid

Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.