Polish Pass: Tailwind Elements

[endigo9740]

Base on: #782

Warning items with breaking changes will be indicated as BREAKING:

The goal of this pass will be to improve, refine, and finalized as many of the Tailwind Element styles as we can. This includes but is not limited to the following:

• Fix style issues and bugs
• Improve the current styles, minimize code, better handling of edge cases
• Expand with new features as relevant (ex: input/button groups)
• Expand exclusions as needed (ex: .unstyled)
• Create a universal set of "variant" styles, rather than being specific per element

BREAKING: Universal Variants

All elements will now pull from a universal pool of shared variant styles, rather than having a unique set per Element. It's much easier to maintain and much easier to remember and use in practice. For now these will be imported as a stylesheet in all.css but will get folded into the Skeleton Tailwind plugin similar to design tokens. See Tailwind > Elements > Cards for visual examples.

Elements

tailwind.css

• Minor improvements to the comments explaining the purpose of this stylesheet.

core.css

• Documented instructions for customizing the background color.
• Documented text selection styles
• Documented mobile focus tap styles
• Scrollbar styles improved and now support Firefox
• Documented the .hide-scrollbars class

typography.css

• Improve .unstyled class documentation
• Removed the default paragraph text color, per #825
• Anchor styles are now simpler and less opinionated by default.
• Improve blockquote styles
• Improve kbd (keyboard) styles
• BREAKING: Improve Tailwind Typography plugin .prose support

If you prefer the legacy anchor link styles, add the following to your app.postcss global stylesheet:

@apply text-primary-700 dark:text-primary-500 underline underline-offset-4 decoration-dotted decoration-primary-500/20 hover:decoration-primary-500;

forms.css

• Combined previews and documentation into a single page
• Refactored most form styles to improve flexibility and fully utilize design tokens
• Native select[multiple] styles greatly improved (with the exception of Safari, sorry!)
• BREAKING: Recreated validation classes to support success/warning/error
• Improve .unstyled class documentation
• Inputs and button height normalized to keep a consistent vertical size (work better side by side)
• Implemented and documented Input Group styles
• Now supporting readonly input styles
• BREAKING: Removed the built-in margin for label span elements, use .input-label or .space-y-2 on <label>
• Added basic <legend> element styles

alerts.css

• Updated to utilize universal variant styles

badges.css

• Updated to use universal variant styles
• Modified the size, styles, and documentation to differentiate these from chips (these are non-interactive)

breadcrumbs.css

• Improved the doc examples
• Documented how to use #each loops

buttons.css

• Updated to utilize universal variant styles
• Improved the overall documentation
• Implement Button Groups
• The pressed state animation is now simpler and less opinionated

cards.css

• Updated to utilize universal variant styles
• Provided a better demonstration of glass variant style
• Documented the .card-hover class

chips.css

• Updated to utilize universal variant styles
• Minor improvements to the documentation examples
• BREAKING: Documented the new variants and active state styles

lists.css

• Improved documentation examples
• Minor list item padding adjustments
• BREAKING: Renamed class .option -> .list-option

logo-clouds.css

• Updated to utilize universal variant styles
• Minor updates to the default styles
• Documentation improvements

placeholders.css

No changes.

tables.css

• Minor updates to the default styles
• Expanded documentation and detail how many classes should be utilized
• Added .table-compact and .table-comfortable classes for tighter/looser row spacing.
• Reduced column width shifting on sort, per (#833)

NOTE: cell width can still shift if the content within the cells themselves change. This can occur during sorting. You'll need to make column widths fixed to remove this entirely.

Presentation

NOTE: this category has been introduced and may expand over time.

Gradient Headings

• Added additional examples
• Documented both inline and @apply strategies

[endigo9740]

Off to a great start today!

New PR available here:
#844

Preview URL:
https://skeleton-docs-git-chrore-polish-tailwind-elements-skeleton-labs.vercel.app/elements/core

[endigo9740]

A few notable additions today:

1. Form styles are not work. These should be much improved, more robust, and more predictable
2. I've introduced a set of "universal variants" that are shared between different elements (badges, buttons, cards, etc). This means one place to maintain all these styles, and a much more consistently styling between each.
3. I've introduced a new "soft" variant, which is visible on the Badges doc
4. Alerts and Badges have been updated and cleaned up.

Tomorrow I'll pick up from breadcrumbs and move down the list. For forms complete, I anticipate most of the remaining sections should go much faster. This should begin to snowball a bit.

[endigo9740]

Today's update:

Everything from Breadcrumbs -> Gradient Headings has been reviewed and updated. Mostly minor changes overall, but also includes the introduction of the .btn-group (button group) styles.

This will now be marked "ready to test", but tomorrow I want to evaluate a better means to handle:

• Input group exclusion
• Button group exclusion
• .prose exclusion

This may be possible via:

:is(.input-group *) {
    all: unset;
}

I may also tackled a few odds and ends:

• Fix broken "source code" link for Design Tokens
• Final QA pass on my end

EDIT

• Zed pointed out the Forms doc "view source" link is broken.