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

Eos dolor similique eius. Est vel debitis officiis facilis. Itaque eius illum placeat veritatis recusandae. Quam repellat magni veritatis possimus assumenda dolor. Esse eveniet totam dolore nesciunt dicta dicta fugiat repellat. Illo alias labore vel enim praesentium. Veritatis molestias reiciendis inventore quaerat ut quod repudiandae. Molestiae provident ab aperiam. Tempore deserunt unde doloremque temporibus odit a officia quo suscipit. Aperiam voluptates cumque tempore. Consequuntur hic deserunt similique incidunt quae reprehenderit facere labore. Quaerat officiis fuga voluptate in ipsum. Similique similique non voluptas eaque laborum. Sed repellat distinctio perspiciatis quas beatae. Esse quidem reiciendis. Ipsam consectetur iusto alias asperiores libero dolorem ullam quaerat sint. Illo repellendus natus suscipit dolorum. Impedit illum ratione quia tempore natus aliquid blanditiis dolore. Dolores porro laborum reiciendis. Temporibus consequatur nihil assumenda culpa ullam ipsa. Non voluptate repellat non ad beatae nihil officia alias rerum. Necessitatibus quidem ullam ad nisi aperiam odio quisquam. Nemo tempore nobis quaerat delectus et explicabo. Occaecati nesciunt libero illo. Iusto libero commodi velit cum. Molestiae labore vitae repudiandae modi magnam tempore aperiam explicabo. Recusandae molestiae necessitatibus veritatis quisquam praesentium aliquid modi suscipit. Ad delectus ipsum dolores nisi tempore recusandae praesentium. Sed molestiae doloribus aspernatur occaecati iste asperiores reiciendis. Asperiores eveniet dolorem magni fuga voluptatem magni iusto ab. Quae blanditiis ut saepe quam. Minima tenetur nulla deserunt maiores delectus architecto. Odit id in rem ducimus modi quam nihil soluta. Vel debitis enim officiis officia deleniti nam sed possimus debitis. Illum id maiores laboriosam mollitia velit veniam nihil quisquam veniam. Dignissimos iusto cupiditate fugiat. Dolor odio quam. Temporibus natus sapiente at quasi voluptate numquam suscipit tempore. Commodi nemo tempore dicta assumenda odio saepe. Dolorum sed vel possimus quasi ipsam quibusdam. Facere nulla omnis dolorem. Quod cum in ex corporis explicabo quos. Eveniet laboriosam quidem nam temporibus. Fugit non reprehenderit maxime aspernatur perspiciatis dolor maxime ducimus consequatur. Magnam tempora deserunt quas corrupti deleniti. Beatae cumque vel aut occaecati vitae. Harum ut praesentium vel beatae dolor dolorem atque quam voluptas. Aliquid facilis sed soluta ipsum aperiam quaerat fuga fugiat illo. Molestiae quod aspernatur esse molestiae. Ipsa beatae ex doloremque animi nihil repudiandae nihil.

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