Skip to content

How to merge custom utility classes (which change multiple properties)? #323

Answered by dcastil
bengry asked this question in Help
Discussion options

You must be logged in to vote

Note

Examples in this comment are using the tailwind-merge v1 API.

Hey @bengry! 👋 Thanks for your patience!

You need to tell tailwind-merge how conflicts with the vstack (and hstack) classes should be handled. Here a little tutorial:

First we want to use the default config and only add a bit more config to it, so we'll use extendTailwindMerge like this:

import { extendTailwindMerge } from 'tailwind-merge'

// We'll use this function for merging instead of the one exported from the tailwind-merge package
const twMerge = extendTailwindMerge({ /* our config here */ })

Then we want to resolve conflicts between the classes like vstack and vstack-4. For this we create a new class group. tailwi…

Replies: 3 comments 3 replies

Comment options

You must be logged in to vote
1 reply
@bengry
Comment options

Answer selected by bengry
Comment options

You must be logged in to vote
1 reply
@dcastil
Comment options

Comment options

You must be logged in to vote
1 reply
@dcastil
Comment options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
context-v1 Related to tailwind-merge v1
3 participants