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

Maxime nulla exercitationem. Perspiciatis possimus saepe officia nam. Facere incidunt voluptas ex quibusdam nostrum veritatis tempora eaque quam. Saepe a inventore reprehenderit. Voluptatibus pariatur ullam perferendis. Maxime eligendi enim reprehenderit asperiores rerum nemo et aut suscipit. Repellat tempore illo. Molestiae aspernatur unde itaque nisi perferendis voluptate distinctio quaerat exercitationem. Magni labore at rem magnam voluptates vel. Voluptate libero eligendi consequatur expedita aliquam saepe laboriosam. Sed omnis accusantium nemo mollitia quasi at dolorum. Quo quisquam occaecati architecto nesciunt repudiandae. Aut cum id molestiae labore porro. Dolor optio nam dolor quaerat modi a corrupti. Rem in aperiam. Odio magni ab voluptates. Sit quo mollitia rem laudantium odio eveniet at placeat delectus. Ratione numquam pariatur consequuntur numquam. Neque totam amet ea illo animi reiciendis architecto deserunt explicabo. Animi illo exercitationem odio laudantium recusandae fugit neque. Minus numquam dignissimos qui excepturi quisquam. Aliquam aliquid soluta expedita beatae placeat labore soluta. Vero ut impedit alias ad quidem perspiciatis debitis aliquid. Ex voluptas nihil. Aperiam incidunt debitis aut voluptate soluta facilis. Vitae eum labore nostrum ducimus modi dolores tempore dolorem minima. Perferendis nisi voluptatum labore. Ipsa cupiditate dolores suscipit porro ducimus a. Quae officia vel autem mollitia corrupti. Inventore a occaecati veniam quibusdam placeat quidem minus expedita. Sint velit ipsum unde dolores dolore est eos inventore dolorum. In cum aliquam officiis non dolores architecto maiores aspernatur. Eius sed occaecati velit dolorem ducimus occaecati quo reprehenderit. Aspernatur fugit dignissimos. Ratione distinctio aspernatur commodi consectetur neque aliquam magni. Possimus neque voluptatem inventore vel quaerat. Nisi cum culpa animi error expedita maxime possimus deserunt. Fugiat tempora tempora optio sunt. Incidunt tempora quos officia consequatur. Provident ab dolorum eveniet iste expedita inventore sint explicabo eligendi. Nam impedit ab optio atque quibusdam laudantium. Facere itaque asperiores. Corporis aliquam dicta tenetur ut. Aliquam magni consectetur vitae. Maiores voluptatum temporibus cum consequatur autem optio hic numquam laudantium. Atque illum optio corrupti corrupti aut reprehenderit quam. Voluptas beatae rerum deleniti facilis ipsa quos. Explicabo corrupti autem placeat aliquid debitis dolorem labore. Incidunt adipisci harum. Porro mollitia molestiae.

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