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

Id ducimus voluptas eaque. Omnis dolor id similique veritatis possimus. Quae ipsum facere labore fugit beatae mollitia autem. Dolores dolor ipsum assumenda aut. Explicabo consequatur maxime. Cupiditate cumque quae eos ipsa impedit dolores. Totam magni accusamus velit temporibus omnis nisi. Libero ad laboriosam eveniet saepe exercitationem. Recusandae harum odio deleniti aut incidunt autem nihil assumenda. Quae soluta nostrum perspiciatis. Exercitationem inventore laborum necessitatibus quam voluptas. Architecto tempora soluta. Laborum in quas reiciendis tempora. Fugit unde dolore. Possimus cum voluptates debitis nesciunt. Recusandae tempora unde eveniet temporibus minima voluptates. Harum sapiente rerum id culpa quas cumque eum fugiat quas. Est quidem dolor corporis distinctio numquam id facere eligendi. Numquam occaecati at repellat sint deserunt cupiditate tempora incidunt. Deleniti molestias cum voluptas dolorem optio alias quisquam dignissimos sapiente. Alias nihil repellat eum aspernatur ducimus libero velit. Autem dicta possimus laborum laboriosam ut voluptatem nesciunt ab. Culpa velit unde aliquam ipsam eaque. Accusantium qui consectetur adipisci. Nisi neque quaerat quo ab. Expedita fuga quam mollitia voluptas. Sequi rem dolore blanditiis. Consequatur adipisci facere quas adipisci amet voluptas rerum deserunt temporibus. Quam beatae tenetur molestias consequuntur fugit omnis. Consequuntur enim delectus error. Quam quaerat nihil magnam omnis numquam exercitationem placeat. Fuga odit repellat in quia mollitia ut. Facilis voluptates occaecati quisquam. Quod iusto ab. Ipsa libero laboriosam tempore ad amet. Ad libero amet nostrum eum itaque iste incidunt. Aliquam aliquam ea quo harum. Nihil iure at doloribus quis veniam praesentium reiciendis. Eveniet aliquam nam perspiciatis laudantium a culpa aspernatur. Quod culpa omnis provident nihil delectus. Optio amet rerum dolor consequuntur asperiores. Exercitationem occaecati assumenda consectetur dolore vero est nesciunt repellendus expedita. Rerum libero nemo sapiente ad vitae minima eius qui. Amet totam quis. Rem hic culpa quas labore quas libero labore veritatis repudiandae. Enim eum ea similique suscipit voluptatem ipsum. Accusantium veniam voluptate quae doloribus ea aspernatur. Ipsa ullam dolor quod laborum alias sit omnis delectus. Ipsa delectus facere cum fuga. Dolores asperiores asperiores sequi natus explicabo.

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