ui Tailwind config file is rewritten

Im using nextjs 13 with the app router and when I init shadcn it breaks some of my styles.

ShadCN is basically overriding your previous talwind configurations and I need to configurate tailwind again.

The tailwind.config.js should be updated, not rewritten

Jul 08 '23 18:07 yangenmanuel

+1

I was so surprised the first time it happened. I had to undo the change and manually copy over the edits. I agree it should update the config and not overwrite what's already there.

Jul 10 '23 05:07 shamar-morrison

@yangenmanuel Yes, or what one can do it init the shadcn at the first step just after creating next app and then you can include more tailwind config in it so that it doesn't override.

Jul 11 '23 06:07 aashmanVerma

This was pretty annoying, I had written a tailwind config and not commited yet, then shadcn overwrote the file without even displaying a warning.

Jul 18 '23 08:07 buesing

@yangenmanuel Yes, or what one can do it init the shadcn at the first step just after creating next app and then you can include more tailwind config in it so that it doesn't override.

Thats's an option but, what if in an existing project i want to add shadcn? At least you have to receive a feedback from the CLI saying something like "creating new tailwind config file" or "your tailwind configs will be overrided". The ideal should be an update on the existing file

Jul 18 '23 11:07 yangenmanuel

Agree, this just happened to me. Luckily I was able to revert with Git.

Sep 20 '23 11:09 hiddentao

Just lost my tailwind config 😭... Please fix this guys, a warning will be sufficient for now!

Feb 24 '24 12:02 adityanithariya

It overwrites both tailwind.config.js and global.css.

Mar 01 '24 08:03 Nyhz

How to deal with this issue?

Mar 27 '24 05:03 Ayesha-Solanki15

any updates here???

Apr 03 '24 14:04 Lamnxzp

How to deal with this issue?

There's a temporary solution, as follows; pass different path to each file which may get overwritten, and then merge all the files manually with changing paths in components.json

Apr 04 '24 18:04 adityanithariya

a warning would've been nice

Jun 07 '24 11:06 NidhiiJ

Yup, incredibly annoying tbh

Jun 23 '24 20:06 NickWoodward

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Jul 16 '24 23:07 shadcn

Is this fixed?

Jul 18 '24 20:07 adityanithariya

I don't think so because I just had the same issue yesterday

Jul 22 '24 06:07 udbern

Why were they built in this way? Very annoying😡😡😡

Jul 22 '24 17:07 theishu4

I'm working on this. No more overriding files.

Jul 22 '24 17:07 shadcn

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Aug 13 '24 23:08 shadcn

Noticing this is still an issue, is this still being worked on?

Aug 31 '24 19:08 ghost

I'm experiencing the same problem. In my case, init caused not only my tailwind configuration to be overwritten, but also my entire lib/utils.ts file without even warning me. I don't understand why the existence of such files is not checked first. This is terrible.

Sep 19 '24 09:09 dusanbrankov

@dusanbrankov Are you using shadcn-ui or shadcn? Note: the new cli is shadcn and does not overwrite.

Sep 19 '24 10:09 shadcn

@shadcn I followed the instructions in the docs, I used npx shadcn@latest init and the same command to add components. I didn't use shadcn-ui, just checked my shell history in a new session to be sure. The path to the affected file in my case is src/lib/utils.ts.

The init command has created the following aliases inside components.json:

"aliases": {
  "components": "@/components",
  "utils": "@/lib/utils",
  "ui": "@/components/ui",
  "lib": "@/lib",
  "hooks": "@/hooks"
}

And these are my aliases from tsconfig.json that existed before, maybe this has something to do with it:

"paths": {
  "@/icons/*": ["./src/components/ui/icons/*"],
  "@/components/*": ["./src/components/*"],
  "@/*": ["./src/*"]
}

Sep 19 '24 11:09 dusanbrankov

Yeah. This looks right. It reads your tsconfig paths and updates components.json. Is it still overwriting files? (It should only update)

Sep 19 '24 11:09 shadcn

It overwrote the existing utils.ts file and replaced it with the cn() function, I'm not sure if it adds the function on initialization or when adding the first component. I just added another component with the same add command as before, nothing was overwritten this time, probably because the function already exists. So it seems that it only creates/overwrites the utils.ts file if the function doesn't exist yet.

Edit: My assumption was wrong, I removed the cn() function from utils.ts and added another component, it just adds the component without touching utils.ts, so the init command must have caused the overwrite. So I am not sure what exactly you mean by "is it still overwriting files"?

Sep 19 '24 11:09 dusanbrankov

This issue is still occuring in the new shadcn cli. I'm using the fluid-tailwind package and I'm bringing their fontSize and screens theme objects into the theme in my tailwind.config. I've had this config setup for a while but today when I went to install the accordion my config was overwritten and these values where removed. Thankfully the imports remained and eslint flagged the unused vars so it was an easy catch but this will be a pain point if it continues to occur with more component installations.

Sep 24 '24 21:09 natemking

@shadcn ,The issue still persists i cannot use my own conifg inside tailwind-config.ts ,it keeps overwriting ,npx shadcn@latest init command used for installation

Feb 26 '25 16:02 michaelalbert11