Five tips to write better Tailwind CSS in React Projects

Introduction

Most front-end engineers who work with Tailwind CSS, especially in React projects are most likely using it wrongly. In this article, I will share five(5) tips to help improve your workflow and make it saner to work with TailwindCSS in your React projects. If you prefer video, I have embedded one below (you can subscribe to the channel as well)

Let's get into it:

1. Put classes in a variable

Seeing long classes attached to an element doesn’t say so much about the element and can even make the element look intimidating; putting your classes in a variable away from the element allows you to sleep better at night. Let me show:

Instead of doing this:

import { Footer, Header } from "./components"

function App() {
    return (
        <section className="bg-slate-900 min-h-screen md:pt-36 md:pb-20 py-12 text-center text-white px-8">
            <Header />
            <Footer />
        </section>
    )
}

Do this instead:

import { Footer, Header } from "./components"

const sectionStyle = "bg-slate-900 min-h-screen md:pt-36 md:pb-20 py-12 text-center text-white px-8"
function App() {
    return (
        <section className={sectionStyle}>
            <Header />
            <Footer />
        </section>
    )
}

2. Put a class on each line

Putting your classes in a variable doesn’t immediately eliminate the intimidation of having long classes; it feels like looking at the minified version of a CSS file which doesn’t say that much; so why not take a cue from the vanilla CSS and put each classes on their own line. It feels like writing vanilla CSS and is easy on the eyes. For this, the sectionStyle variable now uses a template literal and the code now becomes:

...
const sectionStyle = `
bg-slate-900 
min-h-screen 
md:pt-36 
md:pb-20 
py-12 
text-center 
text-white 
px-8
`
function App() {
    return (
        <section className={sectionStyle}>
            <Header />
            <Footer />
        </section>
    )
}
...

3. Don’t put your class variable inside the component.

Think about it, when people open up a component, they came for the component not really the long class names you have dumped in the component. A better way to make your component look less clustered is to put your class variables outside of the component. This is a lesson I learned from “Tao of React” by Alexander Kondov. With this, your code now becomes:

...
function App() {
    return (
        <section className={sectionStyle}>
            <Header />
            <Footer />
        </section>
    )
}

const sectionStyle = `
bg-slate-900 
min-h-screen 
md:pt-36 
md:pb-20 
py-12 
text-center 
text-white 
px-8
`
...

4. Optimize your classes in the DOM.

Putting each class on a single line comes with a downside. Each class takes up a line in the DOM and that is hugely bad because before you know it, classes alone can have huge optimization impact on your application and this defeats one of the major purposes of TailwindCSS. For this, I use this npm package called @netlify/classnames-templates-literals what this package does is to ensure your classes are one line in the DOM. With this your code now becomes:

import ctl from "@netlify/classnames-template-literals"
...
function App() {
    return (
        <section className={sectionStyle}>
            <Header />
            <Footer />
        </section>
    )
}

const sectionStyle = ctl(`
bg-slate-900 
min-h-screen 
md:pt-36 
md:pb-20 
py-12 
text-center 
text-white 
px-8
`)

5. Do not conditionally render classes

So what are you supposed to do? Well, create an object for variants of a component and let that determine the styling for the component. For example, say you have a button component with two variants say: primary and secondary. Here is what my code will look like:

import React from "react"
import ctl from "@netlify/classnames-template-literals"

const Link = ({ href, variant, text, children }) => {
    const linkStyle = ctl(`
    ${linkBaseStyle}
    ${linkVariantStyles[variant]}
    `)

    return (
        <a href={href} className={linkStyle}>
            {text || children}
        </a>
    )
}

const linkBaseStyle = ctl(`
focus:outline-none 
border 
w-[164px] 
border-transparent 
text-sm
h-12 
px-6 
rounded-lg 
flex 
items-center 
justify-center 
`)

const linkVariantStyles = {
    primary: `
    hover:border-sky-500 
    text-white 
    bg-sky-500 
    hover:bg-transparent
    `,
    secondary: `
    hover:bg-sky-500 
bg-transparent
border-sky-500
    `,
}

export default Link

Conclusion

I hope you found the tips helpful, and useful. You can check out this repo which contains what applying these principles looks like in a project. Cheers!