Tailwind v4 and RFC Follow Up

[endigo9740]

See Also

• Skeleton v3 has been delayed #3175
• Tailwind v4 Support - RFC and Status Update #3192

---

Hey everyone, Chris here from Skeleton. I wanted to share another quick status regarding upcoming support for Tailwind v4 support. Per the discussions linked above, we've called out a few of the specific changes we're anticipating, and of course shared two RFC (request for comment) which the community has responded to. We'll discuss both of these in detail below.

Status Update

I'm pleased to share that progress is going extremely well. You can track our active pull request with all current changes.

Please note that we have decided to go all in and implement all breaking changes right away. This has allowed us to move swiftly, meaning you'll be able to get your hands on a public pre-release very soon. This will be much closer to the final version we ship, meaning one migration in the interim for early adopters, rather than two.

Featured Changes and Updates

As we've said in the past, the new CSS based configuration will be a departure, but turns out it is not an unwelcome one:

Preview the global stylesheet configuration

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

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';

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

This involves:

• Importing the Tailwind directive
• Importing the Tailwind Forms plugin (as always)
• Importing the core Skeleton stylesheet
• Importing one or more theme files
• Optional: setting a Dark Mode strategy, such a using a class selector.

The overall result feels much lighter and more streamlined than tailwind.config. The only thing missing in the example above is @source, which will point to the node_modules location of your Svelte or React component packages.

Theme Format

Additionally we have made a number of modifications to the Skeleton theme format.

Preview the new Skeleton theme format

Aside from moving to pure CSS, we've modified and removed a number of properties. Namely those related to the prior Typographic Scale system, and of course renamed some to match the required Tailwind namespaces such as --spacing. But again the end result is cleaner and easier to work with.

We will soon update all existing themes to this format and of course update the Theme Generator to ensure this is the new standard output.

Base Theme

Additionally, the way the new Tailwind @theme operates means we can actually define a built-in base theme that's on by default. You can see how we configure this here.

Preview Skeleton's new base theme

This is for internal use only, meaning we can author using Sass, but also provides a means for us to extend and configure several of Tailwind's default settings. Additionally, this provides a very rudimentary default theme when consuming Skeleton. If you have not yet registered and activated a theme, you'll no longer be met with a blinding white screen and broken styles. But rather see a very simple monochrome theme by default. We think this will be super handy for prototyping and creating support reproductions!

RFC Results

We raised two separate Request for Comment proposals in our last status update post. Today I'd like to share the results.

RFC: Proposed Preset Changes

As expected, Presets are a highly desired feature in Skeleton. Folks love the quality of life and easy of use they provide. We will keep the current v3 offerings, but enable them via an optional stylesheet import. This will be one-line add to the configuration shown above, and very similar to importing Skeleton's preset themes.

This change has two primary benefits:

1. Skeleton is no longer married to these very opinionated canned styles forever. We very much want users to experiment and create their own unique button and card styles that fit their application's design - rather than forcing everyone down a set path.
2. We are hopeful this will encourage more creativity for users to generate their own cool and unique new presets, which they can then share in community spaces like Discord.

Furthermore, I want to reinforce that Presets are actually already implemented to new core package! And that they will remain there for the whole of Skeleton v3's lifecycle. We already have plans in place to greatly expand the documentation around creating custom presets, and will also provide guidance if and when we ever remove the optional Presets stylesheet from Skeleton's core package.

And if the custom presets concept doesn't pan out, we can always reintegrate in the future. So please do let us know how this works for you in practice. We will be listening to feedback well beyond release!

RFC: Proposed Typography Improvements

I think everyone is in agreement that this is an easy win and easy add. That there's no reason to keep the split Typography system. As such, we've already implemented the change, which you can preview here:

Preview the built-in typography scale changes

I'm happy to report this is just as intuitive to use in practice as we were all hoping!

We Comes Next?

While we're moving at a very quick pace, I will caution that there are still a number of steps required before we can deliver this update to everyone. This includes the following:

• Finalizing porting all features (now complete!)
• Updating our other internal monorepo projects to begin basic regression testing
• Updating all existing Skeleton themes to the new format, and updating the Generator to support this as well
• Updating all documentation to reflect the newest changes
• Working with the contributors of the Figma UI Kit (and Figma plugin) to ensure they are up to date
• Preparing and deploying the new core package to NPM

Once live, we'll begin gathering feedback and address any notable issues that are found. But once we feel we've hit a point of stability, we will transition to our final release process. And of course, we'll keep you in the loop when this occurs. Especially once we have a set date for the Tailwind v4 preview and of course the final release!

[rChaoz]

Finalizing porting all features (likely concluding later today)

This is actually insanely fast, amazing work! Can't wait to migrate everything to v3.

[endigo9740]

We rewrote all styles from @apply to a vanilla-ish CSS syntax. I say "ish" because there's definitely some Tailwind-specific directives mixed in like @variant and --spacing(). I really expected this to take longer, but these extra utilities came in clutch. At least in our testing playground everything is working. I just have a couple odds and ends left, such as the 2-3 custom animations we provide specifically our components to consume. And of course porting all preset themes to the new format. But yeah, progress!

Kapture.2025-02-11.at.16.15.22.mp4

[nicolas-albert]

Great work!
I already use svelte 5 + sveltekit 2 + skeleton 3 + tailwind 3 for a project (migrated from svelte 4 / skeleton 2).
How can I test with tailwind 4 and this branch.
Can I reference a git url for @skeletonlabs/skeleton in my package.json ? (and for @skeletonlabs/skeleton-svelte)

[endigo9740]

How can I test with tailwind 4 and this branch.

We'll have a follow up announcement once work is completed and we're ready for users to test. Keep an eye out for this over the next couple weeks.

However, if you want to preview the changes themselves, you can see the work on the PR mentioned in the post above:

• Feature: Tailwind V4 #3189

[GabrielPaliari]

Hi, thank you very much for the update! I am anxiously waiting for Skeleton V3 to be released so I can start my project—an open source car ride app! I've never contributed to open source before, but Skeleton is so beautiful and well documented that it feels as if it were inviting me to contribute to the frontend open source community.

I would like to congratulate the Skeleton team on choosing Svelte as the frontend framework. Svelte is exactly the framework I was looking for: it's easy to learn, fast, and its community and ecosystem are the best I've ever seen—evolving at an impressively accelerated pace (and I've coded in React, Flutter, and Angular for a considerable time).

I've always felt that frontend development was heading towards overengineering and unnecessary complexity. Of course, React and Angular have improved a lot, Flutter is awesome for mobile development, and many other frameworks and libraries have made significant contributions. However, for me, since I discovered Svelte, it feels like frontend and web development are finally moving in the right direction. It just feels right and simple—and simplicity is a concept rarely fully understood in our field.

I want to finish by saying that I felt the same way the first time I saw the Skeleton library documentation. I truly believe that with Skeleton V3, an entire world of infinite possibilities will open up for the open source frontend community.

Keep it up, guys! Let's create amazing things that elevate the human spirit and inspire progress!

(created with AI)