Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1545

How do I use postcss with Svelte and Tailwind? Upgrade seems to cause issue with "@tailwindcss/postcss"

$
0
0

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

enter image description here

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?


Viewing all articles
Browse latest Browse all 1545

Trending Articles