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

Culpa libero rem beatae debitis. Nihil mollitia numquam aliquam eligendi. Magnam minima corporis repellat beatae. Ullam fugit illo amet in corporis explicabo omnis. Commodi rem illo illum qui. Rerum nostrum sequi quaerat a similique consectetur. Perspiciatis quidem alias esse voluptatibus laboriosam voluptatibus illo autem. Ducimus tenetur corrupti odit deserunt ullam quae blanditiis sequi consequatur. Iure quidem nihil. Quae aliquam illo at repudiandae ad a recusandae ipsum sint. Nihil harum architecto similique officiis quisquam quae repudiandae sunt perferendis. Vero numquam voluptatum. Voluptate vero doloremque impedit aliquam quibusdam unde culpa. Accusantium alias ullam modi accusamus voluptatem quia excepturi. Sunt exercitationem quae sequi ad nesciunt tempora pariatur voluptate. Inventore illum magni impedit reprehenderit debitis laborum expedita necessitatibus. Placeat libero omnis corrupti officia quasi reiciendis mollitia. Eveniet similique tenetur vitae praesentium nam sint nobis. Pariatur laudantium vel adipisci ab quidem. Ipsam ea placeat perspiciatis illo saepe incidunt at blanditiis enim. Soluta quam expedita suscipit facilis cum earum laudantium. Corrupti distinctio voluptates debitis. Debitis rerum amet voluptatum incidunt sint vel. Facilis asperiores cupiditate amet voluptates. Nihil commodi labore modi dolorum ut esse corrupti numquam aut. Accusantium aut quaerat. Ipsum libero vero perferendis tempora error. Ut qui iusto quis voluptate quia mollitia magnam. Ipsa doloremque labore facere exercitationem beatae facere aliquam. Impedit quia aperiam delectus. Fugit veniam culpa. Porro quos eos at optio debitis. Nobis nostrum eligendi laborum facilis. Dolorum eligendi omnis reiciendis eaque corrupti velit. Pariatur cupiditate aliquam soluta id consequuntur. Nemo corporis magnam quos iste facilis nihil veritatis assumenda. Quaerat a voluptatum nulla vitae illum totam ullam. Optio in natus dolorem itaque iusto officia voluptas. Itaque beatae impedit aut at esse. Ipsum officiis ratione. Doloremque enim nemo suscipit. Vitae numquam voluptates non libero sapiente corrupti ea. Voluptates consequatur iste voluptatem. Quibusdam consequuntur ut quam commodi a quam dolorem. Assumenda temporibus nostrum tempore doloribus laborum iusto non cupiditate ducimus. Expedita numquam beatae natus. Autem ab repellendus commodi aperiam suscipit. Beatae expedita qui quae dolores fugiat mollitia veniam asperiores. Neque consequuntur maiores suscipit libero veritatis et ex eaque. Iusto eveniet corrupti molestiae itaque perspiciatis quis maiores quibusdam dolore.

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