Download code not working on local host

v0
,
1
  1. I created a new project using npx create-next-app@latest
  2. Clicked download on v0 design and copy/pasted my code into terminal npx shadcn@latest add "https://v0.dev/chat..."
  3. I got a unstructured site design that looks like html, but isn’t formatted

I’m not sure if it’s a tailwind issue or what but this used to not happen. I also realized that the code is now just a page.tsx vs a it also having other files (ie layout.tsx etc)

If it’s missing tailwind, then id like to know why this was designed in this way. Maybe I’m missing something?

Any tips on how I should be doing this?

4

this will never work smoothly since tailwind and nextjs versions are completely different. The NextJS one you downloaded is 15.2.4 and the one you created is 15.3.3 (probably), Tailwind most likely be 4.1.4 (the one created) and 3.4.17 (the one downloaded). There are several Tailwind configurations that doesn’t match and they are completely different.

You have only to use the components and not the base itself. But Tailwind do have a tool to upgrade the versions and the code itself (since several classes have been changed).

So… yeah… good luck =)

1 Like
5

got it, i just reverted to 3.4.17 but confused why v0 makes this time consuming, especially in the face of so many ai design competitors

6

The problem is

  • v0 doesn’t yet support Tailwind v4
  • create-next-app now defaults to Tailwind v4

If you use the git sync flow to create your new repository this should work out of the box, but unfortunately will have to either use Tailwind 3 projects locally or wait for v0 to Tailwind 4 in order for the CLI tool to work seamlessly

7

I truly don’t know… but, if you have the knowledge and some time, you can do whatever you want in v0, once you are satisfied, copy the code, apply into a newer version, refactor and update whatever is needed and move on…

I already had my share of delusion with v0 already. It really helped me to achieve what I wanted and I’m really satisfied with the final result. But, since I’ve learned v0 sync but do not merge whatever you do locally in it, I kinda had much more advances updating my stuff…

So, feel free to do what you want in v0, copy the code, apply into where you need, refactor and just keep doing =)

8

Got it. Yeah I guess because it’s a vercel product I’d love to see it align between products. If you want people to use tailwind 4 then why not use that in v0 by default. Just feedback but now I figure it out :slight_smile:

1 Like
9

then why not use that in v0 by default.

Quite simple, because their LLM is trained with old data and, until they release a new one with most updated code, it will take time. Most likely they are training a new one now with its current usage and, in a near future, they release a new (and improved one) version and everything will be alright =)

You can see this easily, they use their own tool (NextJS) in an old version (15.2.4), so just following this idea, you can imagine all other tools.

So, I hope they release a newer version soon =)

1 Like