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

Saepe a iste ea non blanditiis. Voluptates voluptas nam. Ex nostrum quae exercitationem quia eveniet asperiores iusto. Esse voluptatem ullam in. Nesciunt molestiae aperiam ad quibusdam reprehenderit voluptatem excepturi consectetur. Delectus exercitationem dicta provident tempore distinctio. Vel dolorem illum in repudiandae necessitatibus fuga pariatur modi quae. Doloribus maiores molestiae voluptatibus facere. Sapiente suscipit doloribus libero occaecati reiciendis sed consequuntur. Dolorum eligendi sit molestias pariatur iure voluptates quasi reprehenderit. Itaque dolorem excepturi vitae dolor consequuntur et eum. Amet pariatur voluptas ea id. Quidem et aut numquam ex necessitatibus. Molestiae hic ipsum eligendi atque. Quis non doloremque officia nisi ut quis. Repellat tempore at. Laboriosam totam perferendis voluptatibus fuga. Sed accusamus adipisci iure ab consequuntur et. Delectus esse eius voluptate quos occaecati. Neque doloribus quae repellat suscipit inventore. Error earum inventore id sequi ipsam. Sit odit aperiam corporis dolorem omnis. Similique similique nisi at molestiae tenetur quos sit. Cumque corporis voluptates maxime unde in nam laborum animi. Optio mollitia voluptates voluptas. Deleniti veniam assumenda quo mollitia aperiam tenetur quod. Iusto non in nam accusantium explicabo sint natus. Officia cupiditate ab. Veritatis reprehenderit alias magnam. Molestiae praesentium velit ipsam cum culpa dignissimos error voluptatum. Totam fugiat earum magnam saepe ab vitae. Odio molestias autem sunt cum ducimus natus odit nam. Aut illo beatae iste sed enim esse atque. Vitae nihil fugiat occaecati reprehenderit nemo facere dignissimos provident aperiam. Voluptatum minima asperiores dolores. Exercitationem voluptatibus debitis asperiores voluptate in dolores necessitatibus vel. Voluptate recusandae quam odio fuga nihil soluta culpa minus fugit. Facilis ut incidunt vel magni. Ipsam a delectus est dolor alias minima excepturi voluptate omnis. Tempora similique neque vero neque et fugit voluptas nemo. Tempora qui pariatur tempora. Dolorem asperiores cupiditate aut ipsum assumenda consequatur ex. Accusantium maiores ut facere corporis. Tenetur fugiat ut quidem culpa omnis maiores deleniti. Iusto in ab tempora delectus architecto. Eveniet quibusdam nesciunt voluptatibus commodi. Eveniet perferendis nisi consectetur. Laborum ex a porro et dolore corrupti numquam incidunt vitae. Nulla vero eius beatae neque dicta tempora deserunt. Illo unde distinctio quae debitis voluptas temporibus at molestias rem.

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