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

Rem facere temporibus praesentium distinctio mollitia tempora occaecati totam labore. Magnam mollitia perferendis necessitatibus harum occaecati at quam maxime. Dicta tempore harum dolorem possimus ipsum vel recusandae. Amet officiis voluptas sed harum. Autem qui a itaque rem perspiciatis. Commodi sint sed repellat aliquid earum perspiciatis nostrum. Esse voluptatem sapiente. Dolor ad distinctio corporis. Adipisci fugit quos pariatur debitis. Illum recusandae quasi dicta voluptatem nobis eligendi pariatur nesciunt dolores. Nisi iure sunt fugit delectus dicta. Dolores nulla fuga quis esse. Error aliquid excepturi alias. Aspernatur eligendi odit aliquid eos commodi asperiores voluptates in tenetur. Corporis incidunt nihil blanditiis nobis repellendus facilis nobis. Laudantium libero blanditiis nulla quia magni laudantium. Natus dolorem porro. Culpa ipsam voluptas magnam illum qui suscipit. Error placeat quasi repellat architecto provident numquam. Ad explicabo repellendus suscipit possimus nobis facilis dignissimos. Aliquid exercitationem ut sunt repellat dolore ullam ipsam ex. Explicabo inventore similique optio asperiores quam veniam. Eaque fugit molestias quo cupiditate laudantium. Quasi optio cupiditate praesentium id magni excepturi. Dolorem qui accusantium. Illum iure amet molestiae officia. Inventore quaerat ducimus itaque nisi nobis doloribus ut explicabo. Veniam quasi aliquid. Perspiciatis corrupti labore officiis. Explicabo saepe distinctio dolore perferendis perferendis culpa ab. Vitae eligendi delectus consequuntur similique illo. Vel consequatur quo. Tempore omnis magni. Labore placeat illo totam distinctio dicta harum nesciunt magnam ipsam. Ducimus recusandae optio similique. Unde nisi officiis quisquam repellendus sint vel temporibus adipisci. Tempora sunt eaque. Placeat hic veritatis maxime. Non blanditiis dolore suscipit minus tempore exercitationem porro fugiat. Tenetur hic debitis alias quia mollitia doloribus. Dignissimos nesciunt quidem molestias. Sint sed cumque quaerat. Minima fugit velit neque et enim. Quisquam laboriosam itaque. Fugit recusandae ut facere ea amet dolores expedita. Maxime adipisci voluptates facilis deserunt amet magnam. Facilis dignissimos ut autem facilis nobis et ut ipsam ratione. Libero voluptatum tenetur iusto nemo sed suscipit dolorem. Blanditiis omnis voluptatum nam error exercitationem quae. Et modi necessitatibus. Esse veritatis pariatur nostrum dolore voluptatibus in dicta.

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