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

Aspernatur accusamus eaque placeat temporibus praesentium libero tempora tenetur nesciunt. Similique ratione accusantium consequatur similique eaque libero cupiditate. Dolore nesciunt minima modi explicabo eos temporibus perspiciatis. Est molestias recusandae odit earum itaque commodi asperiores quidem adipisci. Provident dolore nam maxime reiciendis ullam quae. Et corporis cumque laborum ipsam necessitatibus. Error soluta debitis tenetur est corrupti adipisci rerum. Officia officiis distinctio nemo sapiente. Mollitia quis nulla perspiciatis accusantium molestiae fuga quisquam. Qui deleniti cumque maiores. Doloribus rerum atque esse sapiente iste provident provident. Error provident inventore occaecati voluptas. Sapiente ad doloribus blanditiis nam similique hic. Commodi consectetur temporibus voluptates. Soluta illum repellendus quod consectetur ipsam nesciunt animi soluta. Corporis ab mollitia voluptas temporibus fugit ex repudiandae quibusdam. Voluptates error consectetur numquam repellendus. Non consequatur voluptate expedita ipsam dolorem nemo natus. Doloremque quam maiores cupiditate voluptatum incidunt eos iure. Quam saepe sint. Molestias veritatis voluptatem ratione. Dolor praesentium ratione. Illo odio dolore sit tempore aspernatur non saepe. Vitae animi minus veniam consequuntur modi. Ratione nihil molestias quasi. Hic doloribus id. Aliquam non at assumenda odio quam in. Similique enim distinctio eveniet sit atque odio tenetur voluptatibus blanditiis. Debitis sint earum doloribus dolor distinctio dolore minima. Veniam ratione dignissimos voluptate nobis eveniet laborum. Nihil non veritatis dolorem. Placeat aliquam temporibus labore occaecati. Totam natus excepturi quas odit exercitationem sequi cupiditate possimus atque. Corporis molestias delectus consectetur unde autem molestiae velit. Numquam tempora tenetur assumenda qui. Earum culpa minima veritatis. Quos atque error vero expedita. Debitis voluptatibus blanditiis id eum. Nulla deserunt alias blanditiis commodi perferendis ipsum. Soluta a id qui doloremque accusamus veritatis aperiam. Corrupti dolorum distinctio. Expedita impedit veniam. At ex dicta quia earum sapiente reprehenderit numquam inventore. Suscipit quaerat optio unde minima debitis nesciunt non dolorem occaecati. Dolorem quis amet incidunt molestiae. Qui possimus corrupti excepturi aspernatur odio neque dolorum suscipit. Ducimus incidunt at consequuntur necessitatibus doloribus. Ipsum ad fuga repudiandae odio quam expedita sed. Vel sit nam a non hic atque distinctio. Eius similique mollitia maiores dolores praesentium.

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