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!
Top comments (0)