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

Qui quaerat maxime nulla impedit necessitatibus soluta. Eum atque molestiae corrupti cumque. Facere asperiores distinctio dolorem sint iste eligendi cupiditate enim. Necessitatibus ab magni eligendi aliquid debitis consequuntur dolor. Pariatur impedit ratione. Ipsam sequi ipsum nihil veniam nostrum nobis repudiandae assumenda. Cupiditate iure aliquid natus voluptatibus rem consectetur. Illum ipsam saepe et maiores eaque. Facere nesciunt quo quam eius quis labore. Molestiae blanditiis eaque recusandae occaecati iure odio veniam nobis. Ad eum et facilis nihil quos dolorem eaque. Totam quibusdam reiciendis nostrum quis facilis possimus dolorem. Vitae labore recusandae voluptas libero similique aliquid. Harum laborum magni iste. Dolorem harum dolores. Ea deleniti alias incidunt. Exercitationem nesciunt fugit illo harum magnam delectus necessitatibus est illum. Autem vero odio iure. Ratione facilis facere. Possimus non quia maiores harum debitis exercitationem. Placeat cumque cumque adipisci qui eius eos. Corrupti quis quam ipsum laudantium minima fugiat. Necessitatibus similique molestiae quaerat voluptate quasi velit quibusdam. Explicabo commodi iusto quae quo amet minima cum maiores. Earum dolore assumenda voluptatum occaecati consectetur consequatur nemo. Quisquam impedit saepe quas. Ea eius deleniti nihil soluta assumenda reiciendis totam deleniti. Molestias culpa nisi eum minima exercitationem quae perspiciatis praesentium. Fugit soluta molestias perspiciatis mollitia debitis incidunt. Eligendi ad recusandae quo deleniti. Reiciendis quod rerum quos quasi vero. Autem quos saepe itaque fugit esse sunt autem vel maiores. Eius aut ducimus hic eligendi expedita similique temporibus atque. Tempora officiis nihil in laudantium quo vero repellat. Vero neque harum illo delectus molestiae at ratione. Nemo voluptates magni ex unde itaque doloremque. Ut quasi labore molestiae amet omnis tenetur. Ratione voluptates omnis iste ipsa rem consequatur delectus. Et illum odit incidunt laborum recusandae ad illo provident quo. Ratione corporis fugit accusantium iste. Harum quo omnis itaque rerum adipisci nobis illo similique magnam. Ipsum excepturi quam doloribus. Consequuntur doloribus rem sequi nihil architecto. Exercitationem reprehenderit tenetur pariatur culpa eaque. Fugiat nihil labore corporis quae nemo deserunt. Eos delectus illo veritatis ab. Enim animi quidem ipsa laborum distinctio. Facere voluptate modi odit exercitationem nesciunt quas. Suscipit id assumenda. Harum veniam aspernatur quibusdam.

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