v0.41.48 - Tailwind Elements, Component Overhauls, Clipboard Action, Placeholder, and more!

[endigo9740]

View Release: https://github.com/Brain-Bones/skeleton/releases/tag/0.41.48

Summary

• 🚀 Introducing Tailwind Elements!
• 🎨 Major style and stylesheet improvements!
• ⬆️ Updates to nearly every component!
• 📋 New Clipboard action added!
• ☑️ New Placeholder element added!
• 📕 Major documentation updates!

Hey everyone, it's that time again. We've just released another major update to Skeleton! This update is a notable one because it includes a ton of improvements to existing components, as well as introducing what we're calling "Tailwind Elements." You can read more about these below.

Please be aware that this update introduces a number of breaking changes! We strongly advise you read these notes in full, especially if you're upgrading an existing project. To make this transition less painful, we've provided a handy migration guide below.

👉 Migration Guide

• v0.41.48 - Migration Guide #250

Major Updates

Introducing Tailwind Elements

As mentioned above, this release introduces new feature called "Tailwind Elements," an extension of the modular CSS stylesheets added in the last release of Skeleton. These provide styles for your page body, typography, form, and more. We've implemented a new showcase for each of these here:

• Core
• Typography
• Forms

Additionally, we're introducing simple and easy to use HTML/CSS elements that utilize Tailwind-like utility classes. These provide styles for common UI like buttons, cards, badges, lists, and more. These automatically adjust to your Skeleton theme and support light/dark mode. You can view each of these here:

• Badges
• Buttons
• Cards
• Lists
• Logo Clouds
• Placeholders

And yes, we know that many of these were in the library in the form of Svelte Components. However, we've created a page showcasing the benefits of Tailwind Element versus Svelte Components.

To implement these, see our Stylesheet Updates below, or view our migration guide for step-by-step instructions for migrating from the Svelte Component to Tailwind Elements.

⚠️ An Important Note Regarding Converted Components ⚠️

As of this release, any Svelte Component that exists as a Tailwind Element will be considered deprecated. This means these components will no longer receive updates or support. More importantly, these components will be REMOVED from the the library in the next release!!! It's crucial you migrate to the Tailwind Elements as soon as possible!

Stylesheet Updates

In order to support the new Tailwind Elements feature, we've overhauled our stylesheet system.

Guide: Styling

We recommend that most users remove the individual stylesheet imports in favor of the new combined all.css stylesheet. This includes everything, from global styles to Tailwind Elements, all in one convenient import link. However, if you're a power user or running a smaller project, you may want to review the "Select Stylesheets" section. This details the role of each stylesheet and the recommended order if you wish to import these piecemeal.

Please be aware that this import does not replace the need for your Skeleton theme or global stylesheet! Keep those as is!

Component Consistency Improvements

This release also includes updates to nearly every component in the library! Our focus was improving consistency, from feature sets to props to visual design. Many components were also rebuilt to meet our latest standards. The Stepper component is a perfect example of these changes, including new features and a new design as well as improved transition effects.

See the full list of changes here:
#194

• The first post details "global" updates to all components.
• The second post details unique updates for each individual component.

Please be aware that these updates introduce breaking changes, primarily due to prop name changes. Be sure to review the link above and ensure your components are up to spec!

Note that a few components didn't make it in this round, but will be addressed in a future release: #254

Minor Updates

Documentation Site Upgrades

We've made an number of documentation updates, including but not limited to:

• Migrating Svelte Components like buttons, cards, etc to their new Tailwind Element version
• Improving the onboarding experience, highlighting only the most crucial information needed
• Overhauling the Tailwind documentation page, including guidance on for using Dark Mode
• Overhauling the Styling page, covering the new stylesheets and better instruction for per-component styling
• Introducing a new Docs > Features page to compare ALL of Skeleton's features, both new and old
• Reorganizing the sidebar, including a new search feature (finally!)
• Updating nearly every Component, Action, and Utility documentation page with better info and examples!
• Improving grammar and fixing typos, though we continue efforts to improve this! (PRs are welcome!)

Forms Preview Page - View Doc

Alongside our documentation updates, we've implemented a highly requested showcase of form elements, using the Tailwind Forms Plugin paired with our Tailwind Elements forms.css stylesheet.

New Action: Clipboard - View Doc

A brand new Svelte Action that provides a number of ways to copy data to your clipboard on demand, including passing data directly and grabbing element inner HTML content or the value of a form. Special thanks to @niktek for contributing this.

Code Block "Copy" Button - View Doc

With the addition of the new Clipboard action, we've updated our Code Block component with a slight visual change and new "copy" button. Thanks to @niktek for this as well!

New Element: Placeholders - View Doc

Alongside the other Tailwind Elements, we've introduced a new UI element called Placeholder. This is a "skeleton" style placeholder meant for replicating page structure while your content loads. Very useful when you're awaiting a slow response from a network call! Special thanks to @salisshuaibu11 for contributing this!

Updates to the /lib Directory Structure - #209

This should only affect contributors, but we've modified the structure of this directory to better support all the new updates and additions to the library.

Bugfixes

• Many small bugs were fixed in components as part of the consistency update
  Improve Component Consistency #194
• A number of mobile responsive issues were also fixed on our docs page, which were implemented into the App Shell
  Mobile responsive layout issues on Docs site #228

Getting Support

If you encounter any issues, please feel free to reach out. The Skeleton crew is available nearly 24/7 to help troubleshoot via one of the following methods.

• File a support ticket on GitHub Issues
• Make a post in the #support-threads channel on Discord
• If an issue is critical you can @ myself (endigo9740) or Nik (niktek) on Discord. We'll respond asap!

Thanks for all your continued support! We hope you enjoy all the new features and updates!