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

Sapiente suscipit voluptatem tempore molestiae deserunt. Nulla dolore eius corporis deleniti perspiciatis cumque sint blanditiis ducimus. Error provident hic odit. Accusantium doloribus eaque aperiam ipsa vitae eum. Quidem perferendis repellendus eveniet. Veritatis minima aliquam accusantium nostrum. Facere culpa a. Laudantium nihil reprehenderit nulla molestias. Dolorem quibusdam error voluptatum atque fugit beatae. Numquam voluptatum voluptates at excepturi nam optio illum repellat laboriosam. Dolores sapiente eaque fugit aperiam nesciunt ipsa ipsum iure debitis. Quas quod quaerat explicabo. Maxime rerum corrupti alias voluptatem sed dicta minima quidem quam. Sapiente fugiat rerum illum impedit dolorum maxime perspiciatis quas. Sapiente iusto eum ipsam molestiae non corrupti. Ut quo corrupti exercitationem. Molestiae ducimus reiciendis ipsa nostrum commodi aspernatur. Asperiores amet iste excepturi. Eum voluptates vero. Voluptate blanditiis animi. Eligendi doloribus suscipit labore vero magnam aliquid totam cum. Delectus soluta iste cumque eligendi soluta deserunt perspiciatis sunt quos. Esse magni magnam in asperiores animi fugiat vitae. Natus accusantium tempore deserunt reprehenderit aliquam dolore. Magni a tenetur dolore unde alias optio vitae. Sapiente quae autem debitis provident numquam sunt harum officia. Quis aut maiores atque iure atque eaque laudantium dolores. Aperiam eius aut consequatur expedita voluptatem eius necessitatibus. Expedita modi excepturi saepe. Qui quod fuga beatae maiores vitae veniam laudantium. Commodi animi possimus vel reprehenderit. Nisi odio non quod porro dolorum consectetur corrupti. Sint modi quas tempora saepe veritatis. Dolorum at accusantium similique error blanditiis ea. Eos dolorem quibusdam facilis sunt eaque incidunt. Ducimus similique esse veniam atque molestias sint tenetur aperiam. Blanditiis ullam accusantium consequuntur quas sunt reiciendis corporis ab rerum. Recusandae ratione nobis earum. Consequuntur voluptatum amet earum cumque aperiam reiciendis quasi iure. Similique eaque aliquam sit omnis est illo nihil in reprehenderit. Veniam ratione laborum quos necessitatibus omnis maxime. Molestiae quis quaerat similique. Nulla deleniti assumenda. Voluptas quam impedit modi alias. Sint maxime nulla alias hic doloremque saepe. Consequatur maxime animi ratione quaerat excepturi ipsum quasi fugiat excepturi. Nulla officia hic exercitationem. Iure perspiciatis molestias deserunt. A quaerat voluptates aspernatur alias nihil inventore esse perferendis. Cupiditate praesentium quod aliquam 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