tailwind-csssveltesveltekitshadcnuisvelte-5

sv@0.6.21 not generating a tailwind.config.js file - problem with UI libraries

I created my Svelte project using sv@0.6.21

npx sv@0.6.21 create app

Added the TailwindCSS package

npx sv@0.6.21 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 sv@0.6.18 and adding -initializing flag the TailwindCSS package solved the problem. I am curious why is that?

Solution

  • 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 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: [
    tailwindcss(),
    sveltekit(),
  ],
  css: {
    transformer: 'lightningcss'
  }
});

    style.css

    @import "tailwindcss";

    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:

    What's changed from TailwindCSS v4

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

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

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

    Update 2025-02-06

    Now, Shadcn officially started supporting TailwindCSS v4. See: