Tailwind V4 Issue?

[M3IJI3]

How do you add magic ui into the project when using tailwind V4.

Seems like 'npx tailwindcss init -p' does not work anymore.

[Yeom-JinHo]

@M3IJI3

Yes — with Tailwind v4, npx tailwindcss init -p is no longer required since the configuration model has changed.

To use Magic UI with Tailwind v4, we recommend one of the following approaches:

✅ Using shadcn CLI (recommended)

npx shadcn@latest init
npx shadcn@latest add @magicui/globe

The CLI will scaffold the necessary setup based on your existing Tailwind configuration.

✅ Manual installation (copy/paste)

You can also copy the component source directly from the Magic UI documentation and paste it into your project.

Just make sure your Tailwind setup (v4) is properly configured and that any required CSS variables or animations mentioned in the docs are included.

If you’re running into a specific Tailwind v4 setup issue, feel free to share your config and we can take a closer look.

[Yeom-JinHo]

@dillionverma
I think some users might be following the setup instructions from a blog post that still references the older tailwindcss init -p workflow.

I noticed that article seems to be auto-added by a bot — do we know where that content is coming from? It might help to update it to avoid further confusion.

[dillionverma]

Which article are you referring to? Is it one of the blog posts?

[Yeom-JinHo]

@dillionverma

Yes, I’m referring to a Magic UI blog post.

For example, in the following post, it still explains the 'tailwindcss init -p' workflow, which is now outdated:

https://magicui.design/blog/tailwind-landing-page-templates