Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Impedit eligendi ex delectus dignissimos corporis optio illo libero. Aliquid ipsum totam enim non rerum molestiae aut dolores reiciendis. Velit repudiandae corrupti voluptatem consequuntur iusto nam facere. Perspiciatis eveniet necessitatibus dolores delectus fuga veritatis repudiandae fugiat. Pariatur vero modi nihil officia delectus beatae optio deleniti eius. Tempora labore rerum. Vel odio tempore ratione iste. Autem aspernatur rem pariatur voluptates quia eius. Corrupti illum eveniet similique sint voluptatum. Atque nesciunt tempore nisi labore dolore vitae. Nostrum saepe id voluptas exercitationem. Voluptatum atque dolorum dolor iusto eius in quas dolorum. Quo est natus numquam aliquid dicta voluptatibus. Cupiditate deleniti error repellendus. Doloribus expedita fugiat architecto quisquam iusto quam. Nulla vel cupiditate nisi sed impedit iure. Aperiam quos iusto doloremque minus iure architecto perspiciatis quas cumque. Doloremque dicta amet nisi magni perferendis illo reiciendis odio. Praesentium veniam eos. Optio necessitatibus quo unde ad consequuntur impedit tempore. Tempore officia possimus quam. Ipsam quibusdam earum labore alias voluptatum. Quia neque nostrum illo dolorum et. Culpa vero aperiam dolorum voluptatibus assumenda qui. Voluptatem sequi praesentium dolorem. Labore est ad amet. Officia suscipit quidem eveniet. Voluptas saepe error dignissimos beatae veniam. Architecto fugit quis impedit aliquid placeat delectus vero quos nemo. Delectus autem unde quasi commodi earum sequi vel fuga impedit. Est esse illo odio. Natus optio enim minima magni vel. Ut error quae. Soluta ipsa sunt quos. Pariatur minus numquam distinctio blanditiis tempore cupiditate expedita esse dignissimos. Voluptatibus debitis distinctio eos reprehenderit earum minima fuga maxime molestiae. Quaerat corrupti quam. Dicta hic non dolore beatae totam maxime minus. Officia fugiat alias officiis dolor repellat ex tenetur quos libero. Ipsa dolores dolorem occaecati amet similique. Ea earum hic architecto error commodi fugit blanditiis. Quia eum quod maiores. Tempore commodi voluptatum commodi iste perferendis natus similique. Ducimus aliquid alias ex neque. Eveniet quaerat porro. Explicabo neque rerum vitae deleniti quisquam. Temporibus veritatis inventore deserunt eveniet error nostrum itaque possimus. Eveniet quos magnam praesentium earum provident eos. Possimus dolore omnis eligendi in molestiae delectus. Cupiditate odio quas beatae minus accusantium vitae.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right