Tailwind Merge Classes

Introduction

Tailwind Merge Classes is a Drupal module for users working with Tailwind CSS in a component-based syntax. It provides a Twig extension that merges multiple Tailwind CSS classes, resolves conflicts automatically, and ensures a clean, optimized class list. For example, tw_merge(['p-2', 'p-4']) intelligently keeps only the last one, 'p-4'. Array output is also supported via tw_merge with as='array' (or the legacy tw_merge_as_array function), which is recommended when used with Drupal's addClass(). If you are interested in more details, this video explains the original JavaScript utility tailwind-merge that this module's logic is based on.

Usage

Get started quickly by checking out dedicated guides:

• How to use
• Real-world examples

Version Support

• Module version 1.x: Compatible only with Tailwind CSS 3.x
• Module version 2.x: Compatible only with Tailwind CSS 4.x

Post-Installation

Once you install the Tailwind Merge Classes module, there's no need for extra configuration or managing content types. Simply enable the module and start using it in your Twig files.

Third-Party Libraries

This module depends on different PHP packages to handle merging of Tailwind CSS classes for each Tailwind version.

• Version 1.x (Tailwind CSS 3.x): Uses the PHP package gehrisandro/tailwind-merge-php.
• Version 2.x (Tailwind CSS 4.x): Uses the PHP package tales-from-a-dev/tailwind-merge-php.

Both PHP packages require PHP 8.1 and above.