Tailwind Merge Classes
This module provides a Twig extension to automatically merge and optimize Tailwind CSS class lists, resolving conflicts to ensure a clean output. It can output classes as a string or an array, making it easy to use with Drupal's theming system.
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:
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.