Tailwindmarkup~5 mins

Conditional classes with clsx and twMerge in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

We use conditional classes to change styles based on conditions. clsx helps combine class names easily. twMerge cleans up duplicate Tailwind classes so styles don't conflict.

You want to add a class only if a button is active.

You want to switch background color based on a theme (dark or light).

You want to combine multiple class names dynamically in React or JavaScript.

You want to avoid conflicting Tailwind classes like 'bg-red-500' and 'bg-blue-500' at the same time.

Syntax

Tailwind

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const className = twMerge(clsx(
  'base-class',
  condition && 'conditional-class',
  anotherCondition ? 'class-true' : 'class-false'
));

clsx combines class names and ignores false or null values.

twMerge merges Tailwind classes and removes duplicates or conflicts.

Examples

Adds text-blue-500 only if isActive is true.

Tailwind

clsx('text-center', isActive && 'text-blue-500')

Returns bg-blue-500 because twMerge keeps the last conflicting class.

Tailwind

twMerge('bg-red-500', 'bg-blue-500')

Combines padding, text size based on isLarge, and background if isPrimary is true.

Tailwind

twMerge(clsx('p-4', isLarge ? 'text-lg' : 'text-sm', isPrimary && 'bg-green-500'))

Sample Program

This example shows a button that changes style and text when clicked. It uses clsx to add classes conditionally and twMerge to merge Tailwind classes without conflicts. The button background changes from blue to green when active, and the text color changes accordingly.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Conditional Classes Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script type="module">
    import { twMerge } from 'https://cdn.skypack.dev/tailwind-merge';
    import clsx from 'https://cdn.skypack.dev/clsx';

    window.addEventListener('DOMContentLoaded', () => {
      const button = document.getElementById('myButton');
      let isActive = false;

      function updateButton() {
        const className = twMerge(clsx(
          'px-6 py-3 rounded font-semibold transition-colors',
          'bg-blue-500 text-white',
          isActive && 'bg-green-500 text-black',
          !isActive && 'hover:bg-blue-700'
        ));
        button.className = className;
        button.textContent = isActive ? 'Active' : 'Inactive';
        button.setAttribute('aria-pressed', isActive.toString());
      }

      button.addEventListener('click', () => {
        isActive = !isActive;
        updateButton();
      });

      updateButton();
    });
  </script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button id="myButton" aria-pressed="false" aria-label="Toggle active state"></button>
</body>
</html>

OutputSuccess

Important Notes

Always use twMerge after clsx to avoid conflicting Tailwind classes.

Use semantic HTML and ARIA attributes for accessibility, like aria-pressed on toggle buttons.

Test your styles in different screen sizes to ensure responsiveness.

Summary

clsx helps combine class names easily and conditionally.

twMerge cleans up conflicting Tailwind classes to keep styles correct.

Use them together to write clean, dynamic, and conflict-free Tailwind CSS classes.