I created my Svelte project using [email protected]

npx [email protected] create app

Added the TailwindCSS package

npx [email protected] add tailwindcss

And then tried to install shadcn-svelte

npx shadcn-svelte@next init

However couldn't because there was no tailwind.config.js file.

I tried to run the init process for TailwindCSS to get a tailwind.config.js and it didn't work. I tried to create a config file manually and it didn't work either.

However creating a project with [email protected] and adding -initializing flag the TailwindCSS package solved the problem. I am curious why is that?

I created my Svelte project using [email protected]

npx [email protected] create app

Added the TailwindCSS package

npx [email protected] add tailwindcss

And then tried to install shadcn-svelte

npx shadcn-svelte@next init

However couldn't because there was no tailwind.config.js file.

I tried to run the init process for TailwindCSS to get a tailwind.config.js and it didn't work. I tried to create a config file manually and it didn't work either.

However creating a project with [email protected] and adding -initializing flag the TailwindCSS package solved the problem. I am curious why is that?

• tailwind-css
• svelte
• sveltekit
• shadcnui
• svelte-5

• A few days ago, Shadcn officially started supporting TailwindCSS v4; See: shadcn-ui/ui #6427 and Shadcn UI with TailwindCSS v4 – rozsazoltan Commented 3 hours ago

1 Answer 1

How to install TailwindCSS v3

TailwindCSS v4 was recently released. Since then, running npm install tailwindcss installs v4 instead of v3. To install v3, use this command:

npm install tailwindcss@3

• How to install TailwindCSS v3 - TailwindCSS v3 Docs

How to use TailwindCSS v4 with SvelteKit

vite.config.js

import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    sveltekit(),
    tailwindcss()
  ],
  css: {
    transformer: 'lightningcss'
  }
});

style.css

@import "tailwindcss";

• Get started TailwindCSS with Vite - TailwindCSS v4 Docs
• Get started SvelteKit with Vite - SvelteKit Docs

Related for Shadcn UI with TailwindCSS v3/v4

The Shadcn installation guide is incorrect. Using npm install tailwindcss installs TailwindCSS v4 by default, but the guide references the v3 installation. To install v3, you can use npm install tailwindcss@3 until Shadcn officially supports TailwindCSS v4. Aside from this, I believe you should be able to overcome the issue by reviewing the TailwindCSS v4 installation steps.

Some important changes in v4 have not yet been adopted by Shadcn. I wrote more about this here:

• Integrating shadcn/ui with Tailwind CSS v4 in a Tauri Application Using Vite and React
• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite
• Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui

What's changed from TailwindCSS v4

The init process has been deprecated. It is no longer usable as it has lost its purpose.

• Problem installing TailwindCSS after "npx tailwindcss init -p" command - StackOverflow

The CSS-first configuration has been introduced with many new and useful CSS directives, eliminating the need for the tailwind.config.js file.

• tailwind.config.js file not being generated
• TailwindCSS styling is not applied

But the legacy JavaScript-based configuration can still be used with the @config directive.

• TailwindCSS v4 is backwards compatible with v3

Update 2025-02-06

Now, Shadcn officially started supporting TailwindCSS v4. See:

• How to upgrade your Shadcn project from TailwindCSS v3 to v4 - StackOverflow
• Upgrade guide - Shadcn Docs
• shadcn-ui/ui #6585: Known issues - GitHub