feat(cli): add support for custom Tailwind prefix transformer #770

Bekacru · 2023-06-29T13:41:23Z

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.

vercel · 2023-06-29T13:41:26Z

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

A member of the Team first needs to authorize it.

Bekacru · 2023-06-30T07:59:39Z

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

dan5py

Hi @Bekacru, thank you for this great PR.

I see only one problem:
https://github.com/shadcn/ui/blob/eee7ce68798b9345cb969942cd279c3acc054ad6/apps/www/scripts/build-registry.ts#L255-L262

The classes applied in the css file are missing the prefix when it gets added, so they cannot be found.

Apart from that I think that it's really well done.

vercel · 2023-06-30T10:35:48Z

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

Bekacru · 2023-06-30T10:40:20Z

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

dan5py

👍 @shadcn

bim-oulabi · 2023-07-13T07:39:16Z

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

Thanks

firebotQL · 2023-07-13T11:19:43Z

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!

Bekacru · 2023-07-13T20:40:35Z

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

yovanoc · 2023-07-28T00:53:45Z

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

Pipe-Runner · 2023-08-15T09:27:23Z

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

m10rten

As a non-code-owner, I think it looks good, few things I would have done different.

m10rten · 2023-08-16T09:49:00Z

packages/cli/src/utils/transformers/transform-tw-prefix.ts

+
+export const applyTwPrefixesCss = (css: string, twPrefix: string) => {
+    const lines = css.split("\n")
+    for (let line of lines) {


const line?

m10rten · 2023-08-16T09:49:13Z

packages/cli/src/commands/init.ts

+
+

empty lines

m10rten · 2023-08-16T09:51:49Z

packages/cli/src/utils/transformers/transform-tw-prefix.ts

+            )
+        }
+        if (value) {
+            TODO://this is very hacky way find tailwind classes but for current components it works. Need to find a better way


meanwhile is there a better way?

Also comment looks messed up.

GiancarlosIO · 2023-09-10T23:19:50Z

🙏🏼

shadcn · 2023-09-20T04:02:26Z

Looking into this.

tecoad · 2023-09-27T00:10:05Z

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.

HowieG · 2023-10-10T23:17:16Z

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.

wadefletch · 2023-11-16T20:36:22Z

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.

v1adko · 2023-11-21T18:35:52Z

packages/cli/src/commands/init.ts

@@ -120,6 +123,12 @@ export async function promptForConfig(
      active: "yes",
      inactive: "no",
    },
+    {


I think this question should be moved down after tailwindConfig and if config exists, the default answer could be pre-populated based on config.

v1adko · 2023-11-21T18:38:34Z

packages/cli/src/utils/templates.ts

-  plugins: [require("tailwindcss-animate")],
-}`
+  plugins: [require("tailwindcss-animate")],  ${prefix ? `\n  prefix: "${prefix}",` : ""}
+}`


not sure if the empty end line was removed or it was like this before, but I'd suggest to keep it.
Also I see "prefix" option to be defined closer to the top of the config and not the end (maybe I'm mistaking and haven't seen enough configs in the wild). I think it's more visual on the top.

Medaillek · 2023-12-11T09:31:52Z

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.

othorizon · 2023-12-14T06:06:16Z

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

Medaillek · 2023-12-14T10:15:30Z

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

# Conflicts: # packages/cli/src/commands/init.ts # packages/cli/src/utils/templates.ts # packages/cli/src/utils/transformers/index.ts

Medaillek · 2023-12-21T19:07:38Z

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

shadcn

I made some changes to how the transformer handles classes (including support for classes inside cva and cn). We're green!

Thanks for your work on this @Bekacru Appreciate it.

Kinfe123 · 2023-12-21T22:32:50Z

Great job @Bekacru

my main goal was to add support for tailwind prefixes shadcn-ui/ui#770

…-ui#770) * feat(cli): add support for custom Tailwind prefix * fix(cli): add tw prefix on classes applied in the css file * feat(cli): add support for custom tailwind prefix * chore: add changeset * style(shadcn-ui): code format --------- Co-authored-by: shadcn <[email protected]>

feat(cli): add support for custom Tailwind prefix

148f9e1

dan5py suggested changes Jun 30, 2023

View reviewed changes

fix(cli): add tw prefix on classes applied in the css file

39e7932

dan5py approved these changes Jun 30, 2023

View reviewed changes

dan5py mentioned this pull request Jul 8, 2023

Add support for prefix tailwind option #873

Closed

m10rten reviewed Aug 16, 2023

View reviewed changes

shadcn added enhancement New feature or request area: cli labels Sep 20, 2023

shadcn self-assigned this Sep 20, 2023

v1adko reviewed Nov 21, 2023

View reviewed changes

Merge branch 'main' into prefix-main

68a4247

# Conflicts: # packages/cli/src/commands/init.ts # packages/cli/src/utils/templates.ts # packages/cli/src/utils/transformers/index.ts

vercel bot deployed to Preview – ui December 21, 2023 18:39 View deployment

shadcn added 3 commits December 22, 2023 01:06

feat(cli): add support for custom tailwind prefix

b997c2c

chore: add changeset

095ed65

style(shadcn-ui): code format

17f982a

shadcn approved these changes Dec 21, 2023

View reviewed changes

shadcn merged commit 4fb98d5 into shadcn-ui:main Dec 21, 2023
6 checks passed

github-actions bot mentioned this pull request Dec 21, 2023

chore(release): version packages #1756

Merged

kmiterror added a commit to kmiterror/shadcn-solid that referenced this pull request Jan 31, 2024

update cli

e0f1d20

my main goal was to add support for tailwind prefixes shadcn-ui/ui#770

kmiterror mentioned this pull request Jan 31, 2024

Update cli to latest version from shadcnui (needed for tailwind prefixes to work) hngngn/shadcn-solid#34

Closed

aidenlx mentioned this pull request Jun 24, 2024

fix(cli): fix tailwind merge not working on custom tailwind prefix #4087

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cli): add support for custom Tailwind prefix transformer #770

feat(cli): add support for custom Tailwind prefix transformer #770

Bekacru commented Jun 29, 2023 •

edited

Loading

vercel bot commented Jun 29, 2023

Bekacru commented Jun 30, 2023

dan5py left a comment

vercel bot commented Jun 30, 2023 •

edited

Loading

Bekacru commented Jun 30, 2023

dan5py left a comment •

edited

Loading

bim-oulabi commented Jul 13, 2023

firebotQL commented Jul 13, 2023

Bekacru commented Jul 13, 2023

yovanoc commented Jul 28, 2023

Pipe-Runner commented Aug 15, 2023

m10rten left a comment

m10rten Aug 16, 2023

m10rten Aug 16, 2023

m10rten Aug 16, 2023

v1adko Nov 21, 2023

GiancarlosIO commented Sep 10, 2023

shadcn commented Sep 20, 2023

tecoad commented Sep 27, 2023

HowieG commented Oct 10, 2023

wadefletch commented Nov 16, 2023

v1adko Nov 21, 2023

v1adko Nov 21, 2023

Medaillek commented Dec 11, 2023 •

edited

Loading

othorizon commented Dec 14, 2023 •

edited

Loading

Medaillek commented Dec 14, 2023 •

edited

Loading

Medaillek commented Dec 21, 2023

shadcn left a comment

Kinfe123 commented Dec 21, 2023

feat(cli): add support for custom Tailwind prefix transformer #770

feat(cli): add support for custom Tailwind prefix transformer #770

Conversation

Bekacru commented Jun 29, 2023 • edited Loading

vercel bot commented Jun 29, 2023

Bekacru commented Jun 30, 2023

dan5py left a comment

Choose a reason for hiding this comment

vercel bot commented Jun 30, 2023 • edited Loading

Bekacru commented Jun 30, 2023

dan5py left a comment • edited Loading

Choose a reason for hiding this comment

bim-oulabi commented Jul 13, 2023

firebotQL commented Jul 13, 2023

Bekacru commented Jul 13, 2023

yovanoc commented Jul 28, 2023

Pipe-Runner commented Aug 15, 2023

m10rten left a comment

Choose a reason for hiding this comment

m10rten Aug 16, 2023

Choose a reason for hiding this comment

m10rten Aug 16, 2023

Choose a reason for hiding this comment

m10rten Aug 16, 2023

Choose a reason for hiding this comment

v1adko Nov 21, 2023

Choose a reason for hiding this comment

GiancarlosIO commented Sep 10, 2023

shadcn commented Sep 20, 2023

tecoad commented Sep 27, 2023

HowieG commented Oct 10, 2023

wadefletch commented Nov 16, 2023

v1adko Nov 21, 2023

Choose a reason for hiding this comment

v1adko Nov 21, 2023

Choose a reason for hiding this comment

Medaillek commented Dec 11, 2023 • edited Loading

othorizon commented Dec 14, 2023 • edited Loading

Medaillek commented Dec 14, 2023 • edited Loading

Medaillek commented Dec 21, 2023

shadcn left a comment

Choose a reason for hiding this comment

Kinfe123 commented Dec 21, 2023

Bekacru commented Jun 29, 2023 •

edited

Loading

vercel bot commented Jun 30, 2023 •

edited

Loading

dan5py left a comment •

edited

Loading

Medaillek commented Dec 11, 2023 •

edited

Loading

othorizon commented Dec 14, 2023 •

edited

Loading

Medaillek commented Dec 14, 2023 •

edited

Loading