How to use template literals in Tailwind CSS to change classes dynamically ?

Tailwind CSS is a popular utility-first CSS framework used by many web developers to build modern and responsive user interfaces. It provides a wide range of pre-defined classes that can be used to style elements, but what if we want to dynamically change classes based on some condition or user input? This is where template literals come in handy.

Template literals allow us to embed expressions in strings, making it easy to dynamically generate class names. In this article, we will learn how to use template literals with Tailwind CSS to change classes dynamically. Template literals, also known as template strings, are a feature of ECMAScript 6 (ES6) that allow us to create strings with embedded expressions.

Syntax: The syntax of template literals is simple: we use backticks (`string`) to enclose the string and ${} to embed expressions.

<div className={`{variable1} ${variable2}`}>
    ...
</div>

Installation and project setup: You can skip this part if you have a project setup already. Start by creating a new Next.js project if you don’t have one set up already. Before we start, make sure you have Node.js and npm installed on your system. You can download and install Node.js from this https://nodejs.org/en/.

To create a new Next.js application, run the following command in your terminal:

npx create-next-app@latest my-project
cd my-project

Next, install Tailwind CSS and then run the init command to generate both tailwind.config.js and postcss.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths in your tailwind.config.js file as follows:

Javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Finally, update the styles/globals.css file in your project directory to include the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

This imports the base, component, and utility styles provided by Tailwind CSS. 

Run the App: To start the development server, on the command line run:

npm run dev

With the project setup out of the way, let’s move on to some examples.

Project structure

Dynamic class based on state:

Example 1: In this example, we will create a simple counter that increments or decrements a number when the user clicks on a button. We will use a state variable to keep track of the current count and change the color of buttons dynamically based on whether the count is positive or negative.

First, open the pages/index.js file in your project directory and replace its contents with the following code:

Javascript

import { useState } from 'react'

export default function Home() {
    const [count, setCount] = useState(0)

    function increment() {
        setCount(count + 1)
    }

    function decrement() {
        setCount(count - 1)
    }

    return (
        <div className="flex flex-col items-center
            justify-center min-h-screen py-2">
            <button
                className={
                    `${count >= 0 ? 'bg-green-500' : 'bg-red-500'}
                    text-white font-bold py-2 px-4 rounded`
                }
                onClick={increment}
            >
                Increment
            </button>
            <h1 className="text-6xl my-8">{count}</h1>
            <button
                className={
                    `${count < 0 ? 'bg-green-500' : 'bg-red-500'}
                    text-white font-bold py-2 px-4 rounded`}
                onClick={decrement}
            >
                Decrement
            </button>
        </div>
    )
}

In this code, we use the useState hook to create a state variable called count and two functions increment and decrement to update the count. We also use template literals to dynamically generate class names for the buttons based on the value of the count. Conditions:

• If the count is greater than or equal to 0, the Increment button color will be green, and if it is negative, the Increment button color will be red.
• If the count is negative, the decrement button color will be green, and if it is greater than or equal to 0, the decrement button color will be red.

We use the ${} syntax to embed expressions in the string and the ternary operator to conditionally generate the class name. For example, the class name for the increment button is generated using the expression:

${count >= 0 ? 'bg-green-500' : 'bg-red-500'}

Which will evaluate bg-green-500 if the count is greater than or equal to 0, and bg-red-500 otherwise.

The rest of the code is just a simple HTML layout that displays the count and the two buttons.

Open your web browser and go to http://localhost:3000 to see the counter in action. Click on the buttons to increment or decrement the count and watch the button color change dynamically.

Output:

Dynamic class based on user input

Example 2: In this example, we will create a form that asks the user to select their favorite color from a dropdown menu. We will use template literals to dynamically generate a class name for a div element based on the user’s selection.

First, open the pages/index.js file in your project directory and replace its contents with the following code:

Javascript

import { useState } from 'react'

const colors = [
    { name: 'Red', value: 'bg-red-500' },
    { name: 'Blue', value: 'bg-blue-500' },
    { name: 'Green', value: 'bg-green-500' },
    { name: 'Yellow', value: 'bg-yellow-500' },
    { name: 'Purple', value: 'bg-purple-500' },
]

export default function Home() {
    const [selectedColor, setSelectedColor]
        = useState('bg-red-500')

    function handleChange(event) {
        setSelectedColor(event.target.value)
    }

    return (
        <div className="flex flex-col items-center
            justify-center min-h-screen py-2">
            <h1 className="text-6xl my-8">
                Select your favorite color:
            </h1>
            <select className="bg-white border-2
                border-gray-300 rounded-md py-2 px-4 mb-4"
                value={selectedColor} onChange={handleChange}>
                {colors.map(color => (
                    <option key={color.value} v
                        alue={color.value}>
                        {color.name}
                    </option>
                ))}
            </select>
            <div className={`w-64 h-64 ${selectedColor}`}></div>
        </div>
    )
}

In this code, we define an array of color options and use the useState hook to create a state variable called selectedColor that holds the user’s selection. We also define a handleChange function that updates the state when the user selects a different option from the dropdown menu.

The form consists of <select> element that displays the color options and a <div> element that will display the selected color. We use template literals to dynamically generate the class name for the <div> element based on the value of selectedColor. For example, if the user selects “Blue” from the dropdown menu, the class name will be bg-blue-500.

The rest of the code is just a simple HTML layout that displays the form and the colored div element.

Open your web browser and go to http://localhost:3000 to see the color selector form. Select a color from the dropdown menu and watch the colored div element change dynamically.

Output:

I hope this article has given you a good understanding of how to use template literals with Tailwind CSS to create dynamic user interfaces. With these skills, you can build even more complex and interactive applications that respond to user input in real time. To learn more about best practices while defining dynamic classes with template literals check out this official documentation of tailwindcss.