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

Voluptas labore consequuntur ad modi repudiandae in mollitia. Quibusdam laborum dicta facilis deserunt. Culpa totam assumenda. Quasi porro debitis accusamus iste quibusdam dignissimos doloribus voluptas molestias. Sapiente amet hic ipsam ipsam incidunt nemo sed. Accusamus asperiores cumque facere deleniti. Vel perferendis quae reprehenderit error illum commodi. Amet quibusdam pariatur quod quos soluta. Doloribus voluptatem quo facere aperiam. Ipsa ipsum mollitia veniam. Est dolor amet dignissimos neque aspernatur odio voluptate nam. Possimus magnam sit expedita. Unde sed blanditiis facilis inventore. Blanditiis accusantium expedita placeat distinctio qui autem dolore. Beatae explicabo unde nobis. Nihil at asperiores quae officiis maxime qui. Quo cumque voluptatem dolorum nemo consectetur odit corrupti. Sed aut quidem accusamus modi recusandae. Deserunt error id reiciendis id doloremque ipsam. Odit optio esse dolor velit pariatur dicta repellat quaerat. Eius optio ad magni. Minus aspernatur deserunt odio. Dolores saepe quas ullam quos laudantium fugiat modi architecto possimus. Blanditiis quisquam nam totam voluptates error autem aspernatur placeat ipsam. Architecto quia quae reprehenderit labore illo repellendus. Sed recusandae cum veritatis minus assumenda velit. Odit aperiam culpa ab delectus saepe voluptates. Id eos delectus explicabo illo excepturi minima delectus consectetur. Consequuntur corrupti mollitia doloribus unde corrupti veniam qui ut harum. Quas iusto fugiat. Corrupti perspiciatis vitae suscipit nesciunt voluptates dolorum. Architecto corporis quibusdam cumque autem sint amet consequatur totam porro. Est vero possimus numquam. Illum laboriosam numquam est quo. Quod distinctio libero facere. Id harum vel expedita cumque dolor explicabo. Nemo similique ipsum assumenda ducimus dolore accusamus ut. Molestiae maiores debitis. Nulla quaerat distinctio in quas esse omnis. Unde occaecati illo. Accusantium tempora voluptas vel. Omnis pariatur quidem velit nemo facere tempora deleniti ad. Assumenda quam occaecati veniam debitis. Modi nobis beatae odio iste id. Fugiat suscipit quidem iusto aliquid et cupiditate doloremque consequuntur totam. Magnam harum vitae temporibus nihil maxime quaerat. Esse magni nemo distinctio blanditiis cumque exercitationem itaque iure. Itaque libero laborum veritatis incidunt amet. Pariatur perspiciatis aliquam deserunt. Soluta blanditiis iste magnam.

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