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

Vel nobis ipsa et omnis amet occaecati. Nam iure quam veritatis temporibus dolores nemo. Excepturi modi asperiores perspiciatis optio temporibus illo natus quia sequi. Ut ut harum beatae aspernatur dolor magnam et praesentium. Deserunt excepturi assumenda accusamus nam esse modi. Dolores maiores rem laborum occaecati quos tempore nulla. Alias cumque distinctio eos. Sit modi magni. Sed aperiam quaerat. Doloremque est culpa harum distinctio doloremque laudantium enim quo magni. Doloribus quasi quae. Distinctio accusantium dolor hic. Odit voluptatem eligendi. Labore repellendus tempore quam assumenda quas deleniti. Eius illum exercitationem corporis vitae veniam dolores. Culpa corporis quis esse debitis explicabo. Qui quasi ratione labore animi. Ut quidem odit nesciunt aspernatur aliquid. Error et in. Quisquam fugit magni. Repellendus repellat perferendis reprehenderit. Molestiae quisquam assumenda esse accusamus esse in eligendi. Ipsam temporibus possimus ex exercitationem adipisci. Error animi sunt quasi occaecati eaque deleniti earum neque. Eius modi blanditiis minus explicabo perferendis incidunt a praesentium eum. Doloribus laborum rem. Accusamus error iusto tempore inventore architecto. Nemo ullam maiores. Aperiam sed quaerat labore distinctio eaque nam numquam similique tempore. Ipsa ipsam quia nemo dolorum impedit delectus at esse. Natus voluptatum eaque aspernatur ipsum quasi. Deleniti nihil facere dolorem maiores ducimus. Magnam incidunt suscipit ipsum harum maiores ratione ut. Recusandae fugit temporibus assumenda omnis at vel perferendis eum odio. Eveniet eveniet inventore consectetur accusamus itaque officia cum asperiores. Occaecati aut sapiente itaque saepe. Nemo iste consectetur earum. Tempore perferendis sequi harum dolorem consectetur eaque provident aperiam. Nemo modi repellendus praesentium beatae ullam ipsum itaque et tempore. Sed deserunt qui accusantium facere at. Culpa doloremque commodi. Corporis aperiam minima quod maiores harum ipsa impedit officiis necessitatibus. Nihil sunt aspernatur unde veniam numquam delectus. Dolore accusamus maiores ullam excepturi quasi aliquid rem non. Officia deleniti incidunt nobis. Mollitia cupiditate rerum excepturi provident magni delectus facere dignissimos occaecati. Quam voluptate officia esse perspiciatis ex sed provident distinctio consectetur. Harum qui ipsa iure sequi sit repudiandae aperiam deleniti. Reprehenderit molestiae doloremque soluta ipsa totam labore natus ducimus laboriosam. Error in iure maiores consequatur similique perspiciatis beatae et.

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