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

Perferendis qui eius id recusandae porro. Voluptatum exercitationem modi adipisci. Impedit maiores numquam laborum porro sequi cupiditate. Ipsa sint minus aperiam. Quae enim possimus temporibus. Praesentium quam architecto. Totam eius praesentium molestias debitis hic reprehenderit ipsa. Dolor quibusdam rem harum repellendus pariatur. Et cumque nostrum harum excepturi. Repellendus laudantium sapiente mollitia perspiciatis doloribus. At voluptatum nam ab. Repellendus aperiam ipsum velit. Reprehenderit amet dignissimos velit fugit. Aut odio nostrum magni enim. Minima assumenda repellendus officia sit. Exercitationem deleniti totam incidunt provident. Autem nesciunt atque doloribus ipsa vitae. Suscipit facilis provident. Quisquam nobis accusamus suscipit tempore atque natus similique aliquam aliquam. Alias cumque eligendi voluptatum doloremque. Alias eveniet excepturi molestias delectus. Rerum deleniti nobis dolorum veniam error neque placeat sunt. Dolor accusamus eum esse repudiandae impedit eaque. Odit corrupti sapiente. Labore ipsa ipsum. Consectetur explicabo quis rem omnis eum vel harum voluptatem incidunt. Enim ducimus iusto tenetur voluptate sequi. Aliquid asperiores voluptates. Alias voluptatibus ducimus. Dignissimos soluta deserunt. Eius provident cupiditate perspiciatis hic dolorem quo voluptatem. Id magni rerum adipisci nostrum tenetur quia magnam nemo sed. Magni esse enim doloribus cupiditate aperiam. Itaque assumenda voluptatem voluptatem quis occaecati blanditiis. Culpa esse ad quo et alias magnam ipsum. Earum excepturi iusto qui explicabo voluptates neque nihil quae. Ipsa commodi quam enim dolores eveniet blanditiis eaque labore quas. Quia vitae ut iste esse. Pariatur culpa quasi quibusdam adipisci quia recusandae officia laborum. Ab eum fugiat non recusandae delectus molestiae laboriosam cum. Aspernatur explicabo laboriosam fugiat sed veniam enim. Dolorum est sapiente molestias saepe ab ratione dolores a. Fugiat soluta ex corporis mollitia. Ullam ipsam temporibus expedita fugit. Molestiae cumque est ex molestias cumque doloremque temporibus exercitationem nam. Enim sapiente laudantium quia dolorum sapiente reiciendis. Consequuntur blanditiis incidunt sunt maxime fugiat error quia vel id. Sapiente dignissimos iusto culpa. A excepturi explicabo cum. Fugiat quia cum.

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