Please provide a minimal boilerplate application as an starting point

[pdenapo]

It would be useful if you provide a boiler plate of a minimal applicitation that you just can clone as an starting point.

I am having trouble with the instalation instructions in the "Getting Started" section of https://svelte-ux.techniq.dev/

I have a project using svelte-ux, but I want to create a new one using the instructions and styling components like

<Button primary> Click me </Button>

does not seem to work (but tailwind does work!) after the migration to @layerstack/tailwind/plugin

Many thanks!

[techniq]

Hey @pdenapo 👋, that's great feedback.

I used to have npx create svelte-ux with multiple templates but recently removed it as it wasn't well maintained (especially with the CLI deps).

I've been meaning to replace it with a few bare bone templates that are easy to clone (possibly separate repos), especially with LayerChart (and similarly for LayerChart and interop with Svelte UX, shadcn-svelte, Skeleton, etc)

With that said, I don't know when I'll have those setup as I'm buried in priorities ATM.

---

My guess for your issue is you are missing:

module.exports = {
  content: [
    './node_modules/svelte-ux/**/*.{svelte,js}'`
        // ...other content
  },
  // ...
}

in your tailwind.config.js

If this isn't the issue and you could share a repo, I can probably take a look at it in the morning.

Thanks for checking out Svelte UX 😁

[pdenapo]

Many thanks for your help!

(Let me say that I really appreciate your work, and that I really love the svelte-ux look and feel)

However, your suggestion does not seem to work

You can check my repository at

https://github.com/pdenapo/svelte-ux-minimal-app

and see that at https://svelte-ux-minimal-app.vercel.app/

The idea was to use the default colors generated by

https://svelte-ux.techniq.dev/theme

and see my application running at

https://svelte-ux-minimal-app.vercel.app/

However, as you can see everything is white and black (and and ugly dark line appears at the bottom)

For comparison, here is a project that I've done with an older version of svelte-ux

https://proba-sim-pdenapos-projects.vercel.app/

[ I want to see something like this]

The source code is at

https://github.com/pdenapo/proba_sim/tree/main

(I am a mathematician, and this application is an illustration of the Central Limit Theorem of probability theory for my students at Buenos Aires University, Argentina)

[pdenapo]

This last application also uses layer-chart, so it might be an interesting demo for your projects!

[techniq]

(I am a mathematician, and this application is an illustration of the Central Limit Theorem of probability theory for my students at Buenos Aires University, Argentina)

Very cool!

The reason the new project is not working is because it is using tailwind 4.0.9. Your older project is using 3.4.12.

I have not updated Svelte UX or LayerChart to use tailwind 4 yet, but have tested LayerChart and so far 95%+ of it works as is with 4.0 except for default series colors (see issue). You will want to use LayerChart 0.95.0 or greater though.

With that said, there is some CSS variable usage in Svelte UX that needs updated similarly to LayerChart to improve compatibility (which I'm going to knock out in just a minute), but I can't guarantee 100% there won't be other compatibility issues with Tailwind 4. Let me make those changes and push a release and we'll see if that improves/fixes your issue, but if not, I would recommend downgrading to TW3 for now.

I plan to release Svelte UX and LayerChart 1.0 releases any day now (just need a big enough window to create the releases and other chores, although did this morning). These releases will maintain Svelte 3-5 and Tailwind 3 compatibility, but more importantly, will allow development on a next branch that will become 2.0, utilizing Svelte 5 (runes, snippets, etc) and Tailwind 4.

Stay tuned!

[techniq]

@pdenapo I just released [email protected] with the Tailwind 3/4 css variable compatibility fixes. Going to pull down your repo and see if it helps. You might also need to add @source to your app.css like we did for the LayerChart/Tailwind4 example (this is similar to content within tailwind.config.js)

[techniq]

@pdenapo I spent a few minutes and can get it semi-working after updating to [email protected] and hacking around with app.css

@import "tailwindcss";
@source '../node_modules/svelte-ux/**/*.{svelte,js}';


@theme {
  --color-primary: hsl(257.4075 100% 50%);
  --color-secondary: hsl(310.4453 100% 50%);
  --color-accent: hsl(173.4835 100% 42.1865%);
  --color-neutral: hsl(214.2857 19.6262% 20.9804%);
  --color-surface-100: hsl(180 100% 100%);
  --color-surface-200: hsl(0 0% 94.902%);
  --color-surface-300: hsl(180 1.9608% 90%);

}

html.dark {
  color-scheme: dark;
  --color-primary: hsl(234.8208 100% 72.6713%);
  --color-secondary: hsl(313.3209 100% 66.1653%);
  --color-accent: hsl(173.7346 100% 40.1728%);
  --color-neutral: hsl(213.3333 17.6471% 20%);
  --color-surface-100: hsl(212.3077 18.3099% 13.9216%);
  --color-surface-200: hsl(212.7273 18.0328% 11.9608%);
  --color-surface-300: hsl(213.3333 17.6471% 10%);
}

It doesn't appear to be using much (if any) of the tailwind.config.js or the @layerstack/tailwind/plugin to setup the colors (hence the hacking around with app.css

https://github.com/user-attachments/assets/8a38ef46-1051-45a3-a46c-a942f494e4bc

I could probably get it a little better with more investigation, but tbh I would rather wait until I'm full invested in the next branch and running TW4 on the docs. I think the majority of the effort is going to be spent updating the plugin system (as I haven't seen what all needs to change there yet).

Downgrading to TW3 should get you a usable setup for now though. Hopefully that works for you.

[pdenapo]

¡Many thanks again! Indeed, for my use case the simplest solution is inded to keep using the older versions for the moment (and use my project that works fine as a template).

My suggestion was to include in the documentation a template of a minimal working application that one can just clone [or provide npx create svelte-ux as you said] for 3 reasons:

1. It is more friendly to newcommers. And this might help a lot to the addoption of your framework.

2. It documents which versions of the dependencies are requiered (via the package.json)

Note that if one uses "npm sv create" and select tailwindcss as explained in the documentation, this installs tailwindss vesion 4.

3. It helps testing. Before any realease one can check that at least the minimal instalation provided by the documentation works (so that the documentation keeps in sync with the project).

[techniq]

@pdenapo Tailwind 4 support for LayerChart, LayerStack, and Svelte UX is now available via 2.0.0-next.# packages. I wrote a post with some details - https://bsky.app/profile/techniq.dev/post/3lkdpwo4wfs2y

Creating starter projects is still on the list (but buried ATM). If anyone else wants to spearhead this and submit a PR, I would gladly review.

[pdenapo]

@techniq Many thanks! Is it configuration via postcss still posible? I have found it usefull for customizing things! (and to be honest, I don't understand much the philosophy of tailwind CSS. The whole point of CSS was to separate content from design!, tailwind seems to aim to put the color names, etc. back into the html!)

[techniq]

@pdenapo Tailwind CSS provides both @tailwindcss/postcss and @tailwindcss/vite and have setup instructions for both. For all my migrated projects I started with @tailwindcss/postcss but switched to @tailwindcss/vite as it's the recommended approach.

Regarding Tailwind usage in general, I really need to write something official one day, but I jotted down some notes a while back. The general summary is I think of them more as style props/tokens than just CSS classes, and there are more benefits than just pure CSS, but it's very much a love/hate tech choice for many.