Tailwind classes not applied to Svelte components
03:55 10 Jan 2026

i have a project structure like this (some files ommited):

ui
├── lib
│   ├── assets
│   └── components
│       └── Button.svelte
├── routes
│   ├── +layout.svelte
│   ├── +page.svelte
│   └── layout.css
├── package.json
└── tailwind.config.js

With layout.css contents:

@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

And +layout.svelte like:





    




{@render children()}

And Button.svelte with contents:





{#if href}
  
    {text}
  
{:else}
  
{/if}

Now i have a problem, that Tailwind classes don't seem to alter Button component in any way. When i run npm run dev ,Navbar has it's background changed according to Tailwind class, buttons are placed correctly as well, but Button has text color set to default black, and no other effects, as if Tailwind classes were not applied to it.

The tailwind.config.js looks like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
tailwind-css svelte