Five tips to write better Tailwind CSS in React Projects

Aremu Smog — Sat, 29 Oct 2022 06:39:00 +0000

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!

Working with local images in ReactJS

Aremu Smog — Wed, 25 Dec 2019 01:04:30 +0000

Frameworks like React were created to make web design and development easy, the downside for frameworks, however, is that things don’t naturally flow the way they ought to like building from scratch. One of the problems I have encountered while picking up React is working images on my PC and it’s quite surprising that I couldn’t find a solution online(even StackOverflow) so I had to figure things on my own. In this short article, I will walk you through how you can work with local images in React (I assume you already know the basics of react so I will skip some things to save time :) )

(1) Create a new react app or use an existing one

npx create-react-app working-with-images

(2) Navigate to where the image(s) is/are on your PC and copy it

(3) Navigate to the react app you created in step 1 and open the public folder

(4) Create a new folder say images

(5) Paste your image(s) in this new folder

(6) Open up App.js in your desired text editor or IDE and clear the content in the header

(7) Create an img tag, in the src attribute, enter the directory images in curly braces followed by a forward slash and the name of the image as shown below

<img src={'images/1.jpg'} alt="A text describing the image" width="500px" />

(8) Start your server (npm start), your image will show up correctly as shown below

npm start

VERY IMPORTANT: Your images must be in the public folder

DEV Community: Aremu Smog