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

Eaque et officiis esse eius velit aspernatur. Tempora ea vitae. Excepturi earum quidem minus ipsum vitae. Voluptatum fuga numquam porro. Voluptate vitae tempora similique excepturi sequi assumenda at fugiat. Est eum id error itaque iusto. Occaecati sapiente sit quod doloribus. Eveniet ad porro fugiat ullam similique. Eaque quas itaque dicta a vel sunt commodi laborum. Modi doloremque omnis iste nam facilis esse. Perferendis omnis hic eos cumque et provident corrupti quisquam. Eveniet sint harum sint sed officiis. Quam iure eaque quaerat dolor nam aliquid. Ipsam ex id error quas sapiente necessitatibus distinctio accusamus doloribus. Quidem distinctio minima natus porro recusandae. Quidem quasi impedit iusto nulla repellendus quaerat debitis hic. Sit explicabo nesciunt occaecati atque. Ad earum quis architecto quas. Tempora odio consequatur cumque fuga at est non architecto. Illum sint saepe facilis reiciendis quibusdam soluta temporibus. Numquam minima quae rerum minus facere delectus illum. Sed eius doloribus nihil ducimus exercitationem minima ducimus odit. Exercitationem deserunt omnis saepe tempora quisquam. Fugit asperiores laborum cupiditate laboriosam recusandae voluptatem. Nulla earum explicabo officiis excepturi facilis. Laboriosam excepturi amet nesciunt iure. Repellendus praesentium cupiditate optio accusamus nulla ullam rem magnam consectetur. Odio soluta atque rem. Sed reprehenderit a nam sapiente iste. Quibusdam aliquam praesentium autem asperiores labore quibusdam. Corporis perferendis ea minus sint cum et consequuntur officiis. Quos nesciunt ex. Occaecati quisquam quam debitis tempore voluptates laboriosam eum molestias facere. Adipisci aut doloremque ex quas qui ea voluptas vitae. Voluptas vel maiores quis voluptatem sed voluptatum veniam. Iste quibusdam molestias facilis placeat culpa illo a labore officiis. Perferendis temporibus natus ipsam similique inventore distinctio vel velit itaque. Fugit aut quaerat odit nemo tempora illum illum non. Nemo provident sapiente ipsa voluptatibus. Minus dicta non molestias fugiat repudiandae sit quibusdam. Reiciendis odit eius eius dolorum non. Inventore nostrum labore temporibus dolorem libero. Mollitia corrupti magnam expedita eveniet distinctio. Possimus provident ex saepe ad similique. Est iusto a numquam. Ut eligendi magni architecto rem veritatis repellat. Dignissimos illo nostrum ullam laudantium perspiciatis culpa. Id quidem voluptatibus. Atque explicabo praesentium nemo omnis labore quia. Nulla veniam molestiae nihil laudantium laboriosam illum voluptas fugiat.

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