Tailwind Merge Classes

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.

The module also supports Tailwind class prefixes starting from the stable 1.x version. If your Tailwind configuration uses a custom prefix (for example tw-), you can define this prefix in the module’s configuration.

Version Support

• Module version 1.x: Compatible only with Tailwind CSS 3.x
• Module version 2.x: Compatible only with Tailwind CSS 4.0 up to 4.1

Prefix Examples: In Tailwind CSS 3.x, prefixes use hyphens (-), e.g., tw-text-red-500, whereas in Tailwind CSS 4.x, prefixes use a colon (:), e.g., tw:text-red-500 in Twig.

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. To merge Tailwind CSS classes, just use the tw_merge and tw_merge_as_array functions in your Twig templates. It will automatically handle merging and resolving conflicts without the need for additional configuration.

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.0 up to 4.1): Uses the PHP package tales-from-a-dev/tailwind-merge-php.

Both PHP packages require PHP 8.1 and above.