Tailwind v3.3 Updates

[endigo9740]

https://tailwindcss.com/blog/tailwindcss-v3-3

Now that Tailwind v3.3 is live we should look test and ensure Skeleton is working as expected with our default instructions and CLI, while also implementing a number of quality of life improvements. Especially the new Typescript based config file. I'll note each potential change below, which should be split into it's own ticket:

NOTE: the list below has been created with the highest priority items first.

Regression Testing

Ensure updating to v3.3 with no other modifications works as expected, with no notable regressions.

April 4th: initial testing in the first couple days are promising. No notable issues. Feel free to update, but be cautious!

Type Support for Config File - Info

One of the most error prone parts of using Tailwind is the config file due to the lack of IntelliSense or feedback when a mistake is made in the config file. So we should aim to embrace this new format and the benefits it provides asap. This should cut down a slew of support issues on our end.

• Tailwind v3.3: Tailwind Config Improvements #1273
• feat: Skeleton Plugin refactor #1660

NOTE: we may need to contact Svelte-Add to request they setup the config file in this format.

Extended Color Palette - Info

This provides a new 950 shade for darker darks. With this change there are now 11 total color shades available, which means shade 500 is now the true middle tone. The theme generator, design tokens, general documentation, and our preset themes should all be updated to better account for this change. This seems like a trivial change, but will be far reaching.

Line Clamp Built In - Info

Now that the plugin can be retired, we should update our docs and especially the CLI to exclude this plugin recommendation.

• Remove Tailwind Line Clamp plugin create-skeleton-app#23

Gradient Stop Positions - Info

In addition to finer control of gradient stops, this now has a direct benefit to the Conic Gradient component. By implementing a conic gradient into our Skeleton Tailwind plugin modules, we can now support conic gradients declared entirely with Tailwind - no JS involved! Note that this will likely fall under the category of a breaking change though.

CSS variables without the var() - Info

We should update our Docs > Essentials > Styling page to reflect this new option. It's very handy!

New list-style-image utilities - Info

We may want to update our list styles and listbox to support this, with examples.

New caption-side utilities - Info

There's a number of places we might implement this, such our Table styles, as well as our own blog! Ghost allows for captions for most types of embeds.

[avarun42]

What's the canonical way to set up Skeleton in a tailwind.config.ts now that ESM and TS config file support is out?

[endigo9740]

@avarun42 you posted in a ticket with the first two items listed above being:

1. Regression test Tailwind v3.3 and...
2. Test the new config format

So short answer is we don't know yet. Continue follow the current docs if that works without issue, otherwise post your issues here. We'll share instructions once we've got to that point.

[endigo9740]

See me if you wish to work on some of these items. They'll need their own dedicated task per each issue. Some items require perquisite work as well.

[endigo9740]

With v2 we've addressed the most pressing of the issues above. The upcoming theme generator rework will go a bit further though, such as extending the palette. Given this, we'll go ahead and sunset this issue.