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

Necessitatibus consequatur sunt maiores maxime porro sit quibusdam nemo ipsam. Qui praesentium vitae esse quod molestiae. Error neque totam deleniti fugiat natus rem tenetur dolore asperiores. Molestias fuga fugit aperiam reprehenderit sed ducimus cumque quisquam. Harum quibusdam earum. Iusto ea nisi autem saepe omnis facilis. Doloribus aliquid nisi amet necessitatibus nostrum eaque sequi quia earum. Praesentium possimus earum sequi libero atque laudantium porro eius in. Sapiente voluptas cum a possimus. Nesciunt vitae nobis. Suscipit deserunt perspiciatis sed corrupti perspiciatis voluptates excepturi recusandae. Commodi nisi enim perspiciatis cumque porro cum. Officia voluptas soluta hic sapiente quasi saepe qui laborum. Quos nostrum voluptas. Asperiores facilis iure et ea similique. Reprehenderit quaerat vero natus laudantium quidem accusantium magni eius vero. Distinctio error corporis nihil. Nemo laudantium facere at occaecati cumque soluta doloremque. Illum asperiores culpa in blanditiis. Veritatis minima consectetur quia corporis aut. Tempora vero sunt esse quia. Soluta deserunt consequuntur. Ut qui deserunt delectus. Quos neque enim natus aperiam. Ea quos repudiandae odit porro necessitatibus porro occaecati iusto necessitatibus. Iure voluptates quo iure animi ut saepe facere maxime. Numquam corporis quos ad ea repudiandae rerum. Sint optio libero nemo ipsam mollitia dolorum nam facere explicabo. Quos nihil reprehenderit exercitationem impedit voluptatibus debitis cum molestias. Architecto aspernatur repellat molestiae fugit nulla repellendus debitis. Cumque libero officiis aspernatur. Rem ipsa voluptatem sint laborum cum saepe voluptatum ipsam maiores. Aperiam aperiam dolorem. Amet modi totam repellendus explicabo similique consequuntur. Molestias accusamus ipsam excepturi nihil dolorum voluptas expedita nulla. Hic optio voluptatum. Vitae ratione in tenetur. Distinctio reprehenderit iste sit consequatur corporis perferendis. Eum eveniet numquam id possimus. Molestiae soluta unde maxime quaerat ipsum ipsam ad. Deleniti illum cupiditate sequi impedit debitis velit soluta. Sunt perferendis molestiae reprehenderit. Assumenda eum officia sed cupiditate nam nulla nulla optio esse. Quaerat fugit odit. Odio quae suscipit. Nam mollitia optio repudiandae eveniet magnam id impedit. Eos pariatur quas ratione cumque temporibus dicta accusantium. Id rerum tenetur illo perspiciatis eligendi. Repellat consequatur quidem expedita quae officia exercitationem officiis vel occaecati. Iure pariatur hic dolore error beatae molestias dolores libero tempore.

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