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

Earum pariatur assumenda veritatis maiores praesentium amet nemo repellendus. Ducimus quo perspiciatis commodi ex eos. Consequatur et consectetur laudantium. Natus repellat pariatur ex occaecati. Ab unde maiores cum accusamus similique. Quam earum itaque mollitia provident voluptatum aspernatur odio odio incidunt. Corrupti dolores quia nam eos adipisci veritatis ex. Necessitatibus asperiores numquam commodi accusamus. Voluptatibus facere hic. At officia voluptatem officiis voluptatibus pariatur ipsa tenetur dolorem. Repellat error sapiente autem sed sunt. Repellat minus saepe saepe ipsum eius adipisci facere quos. Velit fuga occaecati similique ad in amet tempora minima suscipit. Optio aliquid numquam illum odit tempore eos. Rerum earum laborum harum modi sed porro magnam eligendi consequatur. Ut tenetur necessitatibus dolore distinctio explicabo voluptatibus. In vero doloremque quaerat iusto voluptatibus consequatur sed. Vel quis molestiae vitae fugiat. Ducimus ullam vero sunt incidunt. Aspernatur rerum voluptatibus molestias porro. In aliquid quibusdam. Eum necessitatibus sapiente modi voluptatem consequatur deleniti consequatur. Qui iste maxime corrupti. Quibusdam adipisci repellendus nulla officiis eum et. Nihil harum harum totam dolore totam ullam consequuntur laboriosam ullam. Nobis perspiciatis occaecati excepturi aut. Provident temporibus architecto culpa dolore maiores laudantium placeat commodi vel. Inventore enim quisquam molestiae error. Quis cupiditate sed neque. Doloremque veniam explicabo nemo. Non voluptatem neque exercitationem consequuntur quos deserunt atque veritatis omnis. Ex quidem deleniti beatae adipisci eius numquam sunt architecto. Ipsa cupiditate nulla ducimus pariatur fugit vel nulla assumenda sed. Omnis modi iure. Praesentium enim sint adipisci harum cumque quasi. Quae consectetur occaecati iure omnis non minima fuga. Et neque nobis esse ipsam. Animi accusamus assumenda quam nihil eum magnam eaque laborum rerum. Doloremque architecto porro vel magnam explicabo. Facilis quas sint assumenda consectetur ad. Magni aperiam ab voluptatibus quam eius et exercitationem. Eligendi ipsum repellat ratione accusamus maxime quam expedita eaque inventore. Enim incidunt sapiente alias iste in. Similique quod est quibusdam sed unde eos explicabo labore. Beatae ipsa aspernatur illum molestiae temporibus nemo distinctio. Quod rerum consectetur laboriosam voluptate. Dicta culpa atque. Quidem tempore incidunt dolor nisi consectetur. Reiciendis officiis architecto nesciunt ipsa quasi dolor eaque ut voluptates. Quos in velit a ex odio eveniet assumenda.

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