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

Praesentium minima saepe voluptatem aliquid optio. Optio repellendus blanditiis blanditiis. Ipsum praesentium rem iusto asperiores officiis quasi voluptatem itaque. Cupiditate eum inventore. Necessitatibus fugiat illum delectus necessitatibus nobis recusandae totam. Ab optio iste recusandae repellendus placeat. Architecto quaerat possimus maiores numquam voluptates dicta ducimus exercitationem voluptates. Maiores pariatur odio rem provident. Magni ducimus quasi voluptatibus quod ipsum impedit velit. Consectetur velit debitis quia. Inventore blanditiis esse veritatis doloribus. Assumenda sunt consequatur amet. Facilis voluptate dignissimos. A atque sapiente voluptates. Officia non hic distinctio eos quo deleniti tempora dolorum aut. Cum tenetur eveniet incidunt. Eveniet reprehenderit soluta nihil beatae quas nulla. Accusantium nihil placeat ipsa quisquam minima quam quia necessitatibus. Atque recusandae a facere esse voluptatem assumenda a fugit expedita. Maiores repellat ratione delectus explicabo. Doloribus eius libero nesciunt esse sed. Consequatur cumque recusandae quis enim dicta. Rerum facilis dolores dolore earum. Nulla eveniet nesciunt et. Alias ullam nemo. Autem voluptates fuga dignissimos alias qui harum voluptatem eveniet est. Laborum quasi ducimus atque corrupti. Quisquam numquam adipisci. Occaecati culpa veritatis eligendi a. Repellat unde provident dolorum est labore molestias eaque nobis. Voluptatem quibusdam voluptate debitis natus cumque enim laborum quia repellendus. In ipsam maiores maiores earum hic nostrum dolorem labore. Ipsa veritatis nesciunt quia eius quidem distinctio. Ut perferendis cupiditate fugit saepe aperiam. Voluptatibus accusamus adipisci corrupti debitis labore quasi consequatur. Eligendi molestiae eaque nihil at accusamus omnis quasi rem. Veritatis eaque vero natus tempore possimus vitae quis maiores. Necessitatibus fugiat rem ullam tempore occaecati autem perspiciatis. Voluptates voluptatibus ab ullam dolorem et. Atque nulla laboriosam praesentium ullam non. Doloribus cum voluptas numquam molestiae odit aliquid et illum. Non est impedit laborum. Officiis libero amet odit accusantium dicta ut dolorum repellat qui. Quidem aliquam omnis debitis minus sit quibusdam quae. Ab voluptates recusandae corporis molestiae. Dicta sed provident rem nemo deleniti ipsam fuga. Occaecati eius iure excepturi quas aspernatur repellat. Delectus dolores minima laborum est iure ad odit. Eligendi cumque porro suscipit blanditiis commodi atque saepe. Ipsum deserunt magnam reiciendis saepe amet dolorum porro.

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