I blew away my package-lock and upgraded everything to the latest now when I try to build I get...

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at Te (C:\Users\jacki\Code\love-monkey\ui\node_modules\tailwindcss\dist\lib.js:33:1751)
    at LazyResult.runOnRoot (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:329:16)
    at LazyResult.runAsync (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:258:26)
    at LazyResult.async (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:160:30)
    at LazyResult.then (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:404:17

I tried a couple things... First I tried doing as it said and changed my

But neither tailwind or the changes I had added to my tailwind.config.js were showing up. I went and took a look at the docs and now they removed postcss...

When I tried this I got some basic functionality (like float stuff) working but none of the theme stuff in my tailwind.config.js file showed up.

import { join } from 'path';
import { skeleton } from '@skeletonlabs/tw-plugin';

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte}',
        join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte}')
    ],
    theme: {
        extend: {
            backgroundImage: {
                'synthwave': 'linear-gradient(to bottom, #2b1055 0%, #7597de 50%, #ff2975 100%)',
            },
            colors: {
                // Main palette
                primary: {
                    50: '#fce4ff',
                    ....
                },...
            }
        }
    },
    plugins: [
        skeleton({
            themes: {
                custom: [
                    {
                        name: 'retro-vibes',
                        properties: {
                            // Backgrounds
                            '--theme-font-family-base': '"VT323", monospace',
                            '--theme-bg-1': '#120318',
                            '--theme-bg-2': '#1a0524',
                            '--theme-bg-3': '#220630',

                            ...
                        }
                    }
                ]
            }
        })
    ]
};

So what am I missing? How do I get the gradients, etc to show up again after upgrade?

I tried adding

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@theme {
    --background-image-synthwave: linear-gradient(to bottom, #2b1055 0%, #7597de 50%, #ff2975 100%);
}

Then tried

<div class="bg-synthwave">
    <h1>Welcome to SvelteKit</h1>
    <p>Visit <a href="/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
</div>

And

<div class="background-image-synthwave">

But neither showed the background as intended.

I blew away my package-lock and upgraded everything to the latest now when I try to build I get...

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at Te (C:\Users\jacki\Code\love-monkey\ui\node_modules\tailwindcss\dist\lib.js:33:1751)
    at LazyResult.runOnRoot (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:329:16)
    at LazyResult.runAsync (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:258:26)
    at LazyResult.async (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:160:30)
    at LazyResult.then (C:\Users\jacki\Code\love-monkey\ui\node_modules\postcss\lib\lazy-result.js:404:17

I tried a couple things... First I tried doing as it said and changed my

But neither tailwind or the changes I had added to my tailwind.config.js were showing up. I went and took a look at the docs and now they removed postcss...

https://tailwindcss.com/docs/installation/framework-guides/sveltekit

When I tried this I got some basic functionality (like float stuff) working but none of the theme stuff in my tailwind.config.js file showed up.

import { join } from 'path';
import { skeleton } from '@skeletonlabs/tw-plugin';

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte}',
        join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte}')
    ],
    theme: {
        extend: {
            backgroundImage: {
                'synthwave': 'linear-gradient(to bottom, #2b1055 0%, #7597de 50%, #ff2975 100%)',
            },
            colors: {
                // Main palette
                primary: {
                    50: '#fce4ff',
                    ....
                },...
            }
        }
    },
    plugins: [
        skeleton({
            themes: {
                custom: [
                    {
                        name: 'retro-vibes',
                        properties: {
                            // Backgrounds
                            '--theme-font-family-base': '"VT323", monospace',
                            '--theme-bg-1': '#120318',
                            '--theme-bg-2': '#1a0524',
                            '--theme-bg-3': '#220630',

                            ...
                        }
                    }
                ]
            }
        })
    ]
};

So what am I missing? How do I get the gradients, etc to show up again after upgrade?

I tried adding

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@theme {
    --background-image-synthwave: linear-gradient(to bottom, #2b1055 0%, #7597de 50%, #ff2975 100%);
}

Then tried

<div class="bg-synthwave">
    <h1>Welcome to SvelteKit</h1>
    <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
</div>

And

<div class="background-image-synthwave">

But neither showed the background as intended.

• tailwind-css
• vite
• svelte

1 Answer 1

Legacy Method

When you move to Tailwind v4, it doesn't read the tailwind.config.js by default. You could use the @config directive to manually load it:

@config "../../tailwind.config.js";

Modern Method

But the forward-looking approach is to configure the theme in your "main" CSS file using @theme.

Background Image

For backgroundImage values, they can be configured using the --background-image namespace:

@theme {
  --background-image-synthwave: linear-gradient(to bottom, #2b1055 0%, #7597de 50%, #ff2975 100%);
}

Colors

For your colors, use the --color namespace:

@theme {
  …
  --color-primary-50: #fce4ff;
  …
}

Dark Mode

For darkMode, use the @custom-variant directive:

@custom-variant dark (&:where(.dark, .dark *));

Plugins

@plugin "@skeletonlabs/tw-plugin" {
  themes: {
    custom: [
      {
        name: 'retro-vibes',
        properties: {
          '--theme-font-family-base': '"VT323", monospace',
          '--theme-bg-1': '#120318',
          '--theme-bg-2': '#1a0524',
          '--theme-bg-3': '#220630',
          ...
        }
      }
    ]
  }
}

For extensive plugin options that are more complex than a single-level dictionary, there is no CSS support. So at the very least, you will need to retain the tailwind.config.js for this plugin and point to it with @config as detailed previously.