Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module): handle tailwindMerge config from app.config #2902

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

stijns96
Copy link

πŸ”— 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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant