ui

ui copied to clipboard

https://github.com/shadcn/ui/issues/535

Hey there! It appears that this issue has not received any attention yet. I encountered a similar situation yesterday while working on a project, where I had to manually change the components' prefixes. Hence, it seems imperative to address this matter in some way.

This pr introduces a valuable addition to the CLI. It allows users to define a custom Tailwind prefixes.

The implementation updates both the configuration schema, the init command and the tailwind config templates. The configuration schema now includes a new optional field called "prefix." This will ensures that users who have already customized their configuration won't be required to make any further updates. And, the CLI will not throw any errors with existing configurations.

please take a moment to review these changes and provide your feedback.

@Bekacru is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

hey @dan5py I know u guys are probably very busy but just wanna know if u guys have any taught or feedbacks on this

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)			Dec 21, 2023 9:21pm
ui	⬜️ Ignored (Inspect)	Visit Preview		Dec 21, 2023 9:21pm

hi @dan5py thanks! Oh yeah, I just added that in with the latest commit, so it should be fixed now.

I would really like this feature as the manual work on this is kinda difficult since am working on a monorepo based UI,

Thanks

I do need it as well, as my chrome extension I am building based on shadcn intervening on some of the websites which also built using tailwind. So I cannot release it without major manual rework. In practise I need styling not to clash...

Could you guys have a look into mergins this PR as soon as please? Thanks!

hey @shadcn you should review this when you get time, I'm happy to help if there is something that's holding this back.

Oh we really need this too ! How could we help ?

This is a needed feature for working in a mono repo setup. I am stuck for now without this.

🙏🏼

Looking into this.

Looking into this.

Any news on this? Such a great feature to have. I just noticed the cn function at utils.ts also would have to be updated so twMerge can receive also the prefix to work as intended:

const twMerge = extendTailwindMerge({ prefix: 'wdg-', })

Otherwise, can experience some conflicts for overiding default classes.

Bump could definitely use this! Building an embedded chatbot and the host site's styles are leaking so this would prevent classname conflict. Should probably just implement a Shadow DOM instead.

Any update on this? This is an important prerequisite to being able to safely use shadcn components in a monorepo and/or use them in distributed components that will be embedded in sites with their own (potentially different and conflicting) tailwind configurations.

Hey, I've written this function you can use in javascript to convert className to prefixed className until the cli will be updated :

function addTwPrefix(string = '', initialPrefix = 'tw-') {
      let finalString = ''
      const all = string.split(/\s/g)
      for (let str of all) {
          let prefix = initialPrefix
        const isDoubleDot = str.indexOf(':')
        if (isDoubleDot > -1) {
          let strToUpdate = str.split(':')
          if (strToUpdate[1].startsWith('-')) {
            prefix = `-${prefix}`
            strToUpdate[1] = strToUpdate[1].slice(1)
          }
          const updatedClass = `${prefix}${strToUpdate[1]}`
          finalString += ` ${strToUpdate[0]}:${updatedClass}`
        } else {
          if (str.startsWith('-')) {
            prefix = `-${prefix}`
            str = str.slice(1)
          }
          finalString += ` ${prefix}${str}`
        }
      }
      return finalString
    }

addTwPrefix('-mx-1 my-1 h-px bg-muted')

Not sure if its optimal but it does the job.

Hey, I've written this function you can use in javascript to convert className to prefixed className until the cli will be updated :

            function addTwPrefix(string = '', prefix = 'tw-') {
      let finalString = ''
      const all = string.split(/\s/g)
      for (let str of all) {
        const isDoubleDot = str.indexOf(':')
        if (isDoubleDot > -1) {
          let strToUpdate = str.split(':')
          if (strToUpdate[1].startsWith('-')) {
            prefix = `-${prefix}`
            strToUpdate[1] = strToUpdate[1].slice(1)
          }
          const updatedClass = `${prefix}${strToUpdate[1]}`
          finalString += ` ${strToUpdate[0]}:${updatedClass}`
        } else {
          if (str.startsWith('-')) {
            prefix = `-${prefix}`
            str = str.slice(1)
          }
          finalString += ` ${prefix}${str}`
        }
      }
      return finalString
    }

Not sure if its optimal but it does the job.

thank you very much ,bro. but tailwindcss do not support construct class names dynamically

Hey, I've written this function you can use in javascript to convert className to prefixed className until the cli will be updated :

            function addTwPrefix(string = '', prefix = 'tw-') {
      let finalString = ''
      const all = string.split(/\s/g)
      for (let str of all) {
        const isDoubleDot = str.indexOf(':')
        if (isDoubleDot > -1) {
          let strToUpdate = str.split(':')
          if (strToUpdate[1].startsWith('-')) {
            prefix = `-${prefix}`
            strToUpdate[1] = strToUpdate[1].slice(1)
          }
          const updatedClass = `${prefix}${strToUpdate[1]}`
          finalString += ` ${strToUpdate[0]}:${updatedClass}`
        } else {
          if (str.startsWith('-')) {
            prefix = `-${prefix}`
            str = str.slice(1)
          }
          finalString += ` ${prefix}${str}`
        }
      }
      return finalString
    }

Not sure if its optimal but it does the job.

thank you very much ,bro. but tailwindcss do not support construct class names dynamically

Yes I know, here the thing is to use node js to create your classes, instead of manually adding your prefix on each class. Copy paste the classes you want to convert, it's painfull but less than pointing your cursor in front of each class when the component is generated

ps: i've updated the function on 12/14/2023 11h15 Paris Timezone

I'm comming back again with a greater solution for anyone struggling : https://github.com/Medaillek/shadcn-ui-tailwind-prefix/tree/main

• Copy paste the code in the .cjs file
• Update const prefix = "tw-"
• Update the path to your shadcn-ui components directory
• run it using nodeJS

Great job @Bekacru