Default border/ring/divider not applying to Skeleton themes

[livethetruth]

Current Behavior

Themes, whether generated or hand-coded, don't apply --default-border-width to the border utility, or --default-ring-width to the ring utility. It works as expected if you use @theme {--default-border-width: 20px;} rather than [data-theme='cerberus'] {--default-border-width: 20px;} however. This can also be seen on https://themes.skeleton.dev/themes/create if you change the Border Width value. Unsure if there is an issue with --default-divide-width as well.

Expected Behavior

Expected the border and ring width options on the create theme page at https://themes.skeleton.dev/themes/create to change the border and ring widths, both in the preview and in your own app (assuming you use the border and or ring utility classes and not a set width).

Steps To Reproduce

1. Go to the create theme page.
2. Set the default border width or default divider width to a larger size.
3. The borders and dividers stay the same width, despite the login and card examples both using the border utility.

For the --default-ring-width:

1. Set --default-ring-width: 6px from the theme create page or your theme css file
2. Apply the ring class to an element
3. The ring stays the same width

Link to Reproduction / Stackblitz

No response

Environment Information

System:
OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
Memory: 5.70 GB / 15.57 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 22.11.0 - ~/.local/share/mise/installs/node/22.11.0/bin/node
npm: 10.9.0 - ~/.local/share/mise/installs/node/22.11.0/bin/npm
pnpm: 10.8.0 - ~/.local/share/pnpm/pnpm
Browsers:
Brave Browser: 135.1.77.97
npmPackages:
@skeletonlabs/skeleton: ^3.1.2 => 3.1.2
@skeletonlabs/skeleton-svelte: ^1.2.1 => 1.2.1

More Information

Visual example of the problem on the create theme page. Notice that all default widths are set to 6px, but cards with border applied still have a 1px border, with the inspector showing that the .border class has a declaration of border-width: 1px;.

[endigo9740]

@livethetruth just FYI I believe you may be correct. Here's a minimal example showcasing the issue:

https://play.tailwindcss.com/CXhk9uFl2i?file=css

Hover, if updating these CSS custom properties at Skeleton theme scope isn't working, we may not be able to fix that. If that's the case, we may have to remove those from our themes and instead inform users to set this themselves per their own project using @theme {}

I've raised this issue on the Tailwind GitHub here for further review. If they can provide a fix or work-around we'll go from there:

tailwindlabs/tailwindcss#17789

[endigo9740]

Looks like we got a quick answer. We'll go with Justin's suggestion here. I won't be able to implement right now, but we'll get this asap in our next major release.