Using TailwindCSS In The World Of React

…where most components come with built-in CSS.

I don’t consider myself a developer. I’ve worked as one, but I’ve also worked as product owner, project manager, technical team lead and even as a manager in sales. Programming is an exciting pastime, and I like to keep myself up to date with specific tools so if the need arises, I can contribute to projects.

So if you see that something in this text does not make sense at all — please tell me so. I’d love to learn how to do things better, but here’s something I’ve learned about using TailwindCSS, React, NextJs and other tools recently.

I was introduced to the world of TailwindCSS by a friend who acted in a role of a startup CTO back then — and was my boss. Upon the introduction, I did not find Tailwind to be anything special. Rather than just another tool to work with, I decided to go with Bootstrap since I was under the pressure of time back then.

But I did decide to use TailwindCSS with my next project, and I’ve grown to love it since then. So much so that I’ve used it in all of my projects since then, and when I decided to take a deeper look into NextJs, I first added TailwindCSS to my project.

I’ve noticed that using TailwindCSS, you don’t often want to use the CSS that some ready-to-use React components come with. But you usually can’t add your TailwindCSS classes to the code of components either. So I found that the best way to overcome this issue is to use CSS components. One thing that is awesome about NextJs is that it supports CSS modules out of the box (https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css).

So to my use case — I wanted to display the markdown acquired from the API in the front end. Enter react-markdown, which can display markdown just fine:

Html showed by RemarkDown component without any additional styling.

But notice how it’s just one wall of text with ~ characters in there when the HTML has many different elements:

It is straightforward to pass some styles to the ReactMarkdown component:

And once you do that, you’ll notice how all the HTML generated by the component is wrapped inside the <div> with the given CSS class. But you can’t have single a classname fix all the styles for all the different elements. You could go and pass props per each component (https://github.com/remarkjs/react-markdown#appendix-b-components), but that sounds like too much work. Enter solution in the form of css modules:

Add small update to the way you use the component:

And your HTML will look much better already:

Same HTML styled by TailwindCSS and CSS components

To get around writing this much boilerplate code every time I want to use the component, I also created my wrapper around ReactMarkdown, which looks like this:

This allows me to use markdown by writing much less repeated code:

I’ve found creating CSS modules to be the easiest way to style existing React components in the world of TailwindCSS.

As you’ve noticed, I did not go into the details of my setup (TailwindCSS, PostCSS, DaisyUI, NextJS) and how to set it up. I’ve found that with the help of some googling, it was straightforward — most of the mentioned packages have adequate instructions for setting them up. If you need my help, though, just let me know, and I’ll do what I can to help you.

Please do let me know what you think of my approach. If you think there’s room for improvement, please let me know. I’m always eager to produce better code.

--

--

Idea generator. Technical dude. Interested in a ton of things https://alan.kesselmann.ee

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store