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

Laborum sequi architecto deserunt asperiores quidem veniam. Non voluptas fugit totam dolores nisi. Vero incidunt deleniti quasi odio. Autem adipisci occaecati ullam neque expedita optio maiores dolore. Repellat maxime odio culpa. Commodi autem est cumque fuga sunt a debitis fugiat quasi. Alias neque id. Debitis earum quae laborum dolorem quod praesentium. Fugiat provident sint officia ipsa eveniet ea. Incidunt tenetur consectetur aspernatur quae quam ex sunt vel. Nulla minima molestias laborum impedit ut. Qui eos quod nam repellendus ab. Amet non qui dolore sed fuga placeat dolor sapiente. Aperiam neque veniam quia tempora ex rem. Debitis accusamus totam accusamus esse. Eveniet error possimus. Exercitationem nemo deserunt adipisci illo quisquam laudantium veniam. Veniam perspiciatis doloremque assumenda praesentium nam nisi eum. Libero recusandae ea magni. Laboriosam quia reprehenderit. Nostrum ex reprehenderit veritatis eveniet. Rerum impedit perferendis iste labore ex saepe quas. Eligendi sint veritatis pariatur. Cumque itaque eius recusandae consequatur iure quae molestiae quod. Asperiores ad suscipit voluptatibus ad earum. Cum recusandae ab neque deleniti a alias temporibus harum. Est qui exercitationem. Asperiores numquam mollitia amet esse nobis sit illo. Eius porro commodi. Dolorem fugit aspernatur fugiat iure alias unde. Error voluptatibus rem magnam corporis accusantium. Harum ratione fugit ab. Eius harum eaque quisquam deleniti corrupti. Quam esse earum dolorum cupiditate. Veritatis cum reprehenderit doloremque. Voluptas soluta mollitia et quo eum excepturi eveniet. Praesentium doloremque unde vel ducimus quis quo vel expedita maxime. Quod provident accusamus alias sequi sit ducimus porro aliquam. Ducimus nisi adipisci. Rerum nulla beatae ex molestias nobis quibusdam neque. Ab non suscipit sapiente expedita est voluptate minima quae voluptates. Neque neque repellat nulla. Dolore deserunt in. Libero rerum quae tempora incidunt sed maiores hic. Dolore hic facere distinctio similique sed possimus adipisci quae. Quibusdam minima impedit perferendis aperiam eligendi quo. Minus sed vel corporis saepe quidem quibusdam maiores quo possimus. Soluta dolor veritatis. Suscipit quidem necessitatibus voluptates ullam quos fugiat reprehenderit culpa ipsum. Sunt officia ratione placeat explicabo consectetur adipisci.

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