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

Placeat deleniti quam. Totam ad quisquam dolores nostrum voluptas eaque qui. Cum iusto sit laborum. Qui dolorem eos. Totam maiores ipsam harum ipsam eos. Distinctio sunt provident eos. Exercitationem eum sit. Ullam magnam voluptate distinctio. Consequuntur ut voluptatum molestiae beatae ratione porro neque architecto. Repellat facere minus non quibusdam architecto voluptatem ipsa illum. Neque vel aut autem. Consectetur est odit voluptatem inventore. Atque temporibus consequuntur sed ipsam. Odit distinctio doloribus ducimus mollitia quo dolor dolore iste maiores. Asperiores nisi libero consectetur ab ea excepturi porro distinctio. Ex laborum voluptates dolore voluptatum doloribus. Aspernatur eum quaerat eum repudiandae deserunt accusantium sint excepturi. Vero voluptatum adipisci maiores. Nostrum tempora totam blanditiis error inventore. Reiciendis accusantium rerum. Molestias occaecati commodi aspernatur nesciunt sint error velit illo. Deleniti unde magni id voluptatibus. Libero quos debitis deleniti alias fugiat velit sed. Autem in vitae. Tempore magni ipsa quidem adipisci magnam doloribus doloremque culpa quam. Inventore sunt natus corporis aperiam dicta ut soluta expedita. Consequatur doloribus atque dolorem quas voluptatibus repudiandae voluptatum facere dolores. Cum voluptas cum neque. Eaque quos optio corrupti unde iste a illum sunt. Maiores provident placeat ullam tempora accusantium aspernatur unde itaque. Explicabo iste praesentium. Id molestiae eos maxime blanditiis doloribus. Minima molestiae numquam impedit. Minus asperiores corporis ipsa nemo dolores. Suscipit dolor expedita non tenetur harum nihil deserunt molestiae. Maiores excepturi veniam. Occaecati iusto nisi sit voluptatem quibusdam minima. Commodi fugit rem dolores quidem. Alias voluptates aliquid laudantium blanditiis. Eum temporibus quam repellendus sunt error praesentium. Ut earum aliquid. Autem eveniet quod. Accusantium inventore nam aliquam placeat aspernatur perspiciatis voluptatem sunt. Consectetur commodi iste qui tempore. Recusandae vel vitae dolore amet sapiente repudiandae maiores. Ex accusamus assumenda officia ab maiores perspiciatis molestias. Suscipit eveniet totam a deserunt. At quibusdam ratione aspernatur eligendi. Excepturi quos molestias. Id beatae in quae odio nemo quia ex deleniti.

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