feat(module): handle tailwindMerge config from app.config

[stijns96]

🔗 Linked issue

Resolves #1939

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduces the ability to override/extend tailwind-merge behaviour through the app.config. This is necessary when overriding the tailwind.config default values as explained here: https://github.com/dcastil/tailwind-merge/blob/v2.1.0/docs/configuration.md#usage-with-custom-tailwind-config

More details on how to override the config: https://github.com/dcastil/tailwind-merge/blob/v2.1.0/docs/configuration.md#extending-the-tailwind-merge-config

When extending the spacing for example in your tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      spacing: {
        sm: '0.5rem',
        base: '1rem',
        lg: '2rem'
      }
    }
  }
}

You can now configure tailwind-merge to merge those values with each other.

import { theme } from "#tailwind-config";

export default defineAppConfig({
  ui: {
    tailwindMerge: {
      override: {
        theme: {
          spacing: [...Object.keys(theme.spacing)],
        },
      },
    }
  },
})

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stijns96]

Hi @benjamincanac,

I decided to ditch the restored branch and created fix/extend-tailwind-merge as the old one already contained 25 merge conflicts.

Additionally, I think it's almost fully working, but there is still one challenge. It looks like tailwind-merge doesn't export a type for the extendTailwindMerge function which I want to use for the app.config.ts. I opened a discussion on their repo.

I would like to to wait to merge this when we at least have an answer on this

[stijns96]

Hi @benjamincanac

I found a "workaround". The only annoying thing is that it suggest to types... The normal one at least is working, but I can't figure out how to get rid of the second one. TW Merge haven't replied yet.

./playgroud/src/module.ts

type TailwindMergeConfig = Parameters<typeof extendTailwindMerge>[0];

type UI = {
  primary?: string
  gray?: string
  colors?: string[]
  strategy?: Strategy
  tailwindMerge?: TailwindMergeConfig
  [key: string]: any
} & DeepPartial<typeof config, string | number | boolean>

Any thoughts on this?

[benjamincanac]

@stijns96 Seems fine! I just did the same work for v3: #2938

[stijns96]

@benjamincanac cool! Should I undraft the PR? When do you expect it to be released? I really need it in my MVP...

Let me know!

P.s. have to add some docs as well

[benjamincanac]

I don't know when will the release happen but once it's merged on dev, you will be able to use the edge version anyway.

[benjamincanac]

Do you plan to make the docs in this PR?

[stijns96]

@benjamincanac I think that might be the easiest to do. I'll try to do that asap (hopefully tonight).

[benjamincanac]

I guess you can put it somewhere in https://ui.nuxt.com/getting-started/theming#components. I'll have to do it also on my PR for v3.

[stijns96]

I guess you can put it somewhere in https://ui.nuxt.com/getting-started/theming#components. I'll have to do it also on my PR for v3.

Did you really mean under the "Components" or as a dedicated toc item? E.g.

• Components
• Extend Tailwind Merge
• Dark mode

[benjamincanac]

I would say under Components yes as we mention tailwind-merge inside ui prop and class attribute.

[stijns96]

@benjamincanac There you go