tailwind-merge - Utility library to merge Tailwind CSS classes without style conflicts.

TAILWIND-MERGE ASDF System Details

Installation

You can install this library from Quicklisp, but you want to receive updates quickly, then install it from Ultralisp.org:

(ql-dist:install-dist "http://dist.ultralisp.org/"
                      :prompt nil)
(ql:quickload :tailwind-merge)

Usage

The tailwind-merge:merge-tailwind-classes function allows you to merge Tailwind CSS classes while resolving conflicts between them. It keeps the last class in case of conflicts.

;; Basic class merging - conflicting classes are resolved by keeping the last one
(merge-tailwind-classes '("px-2" "px-3"))
;; => ("px-3")

(merge-tailwind-classes '("py-2" "px-3"))
;; => ("py-2" "px-3")  ; Non-conflicting classes are both kept

(merge-tailwind-classes '("bg-red-500" "bg-blue-500"))
;; => ("bg-blue-500")

;; Conflict resolution - the last class wins
(merge-tailwind-classes '("h-10" "h-min"))
;; => ("h-min")

(merge-tailwind-classes '("mix-blend-normal" "mix-blend-multiply"))
;; => ("mix-blend-multiply")

;; Non-conflicting classes are preserved
(merge-tailwind-classes '("stroke-black" "stroke-1"))
;; => ("stroke-black" "stroke-1")

(merge-tailwind-classes '("outline-black" "outline-1"))
;; => ("outline-black" "outline-1")

;; Arbitrary values support
(merge-tailwind-classes '("stroke-2" "stroke-[3]"))
;; => ("stroke-[3]")

(merge-tailwind-classes '("grayscale-0" "grayscale-[50%]"))
;; => ("grayscale-[50%]")

(merge-tailwind-classes '("grow" "grow-[2]"))
;; => ("grow-[2]")

API

TAILWIND-MERGE/MERGER

package
tailwind-merge/merger

Functions

function
tailwind-merge/merger:merge-tailwind-classes
classes

Merges Tailwind CSS classes while resolving conflicts between them.

This function takes a list of CSS class strings and returns a new list with conflicting classes resolved. When multiple classes from the same group are present, only the last one (in order) is kept, effectively overriding the previous ones.

For example, if both 'px-2' and 'px-3' are in the input, only 'px-3' will appear in the output since both belong to the same padding-x group.

Non-conflicting classes are preserved in the output.

Args:

  • CLASSES: A list of strings representing Tailwind CSS classes.

Returns:

A list of strings with conflicting classes resolved, keeping only the last class in case of conflicts.

Examples:

(merge-tailwind-classes '("px-2" "px-3"))
;; => ("px-3")

(merge-tailwind-classes '("py-2" "px-3"))
;; => ("py-2" "px-3")

(merge-tailwind-classes '("bg-red-500" "bg-blue-500"))
;; => ("bg-blue-500")