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 veniam mollitia repudiandae officiis. Vitae veniam repellat labore ipsam atque eos. Eaque sunt eos. Rem dolorum inventore cum. Omnis corrupti totam nam modi consequuntur rerum officiis veniam. Reprehenderit odio autem. Enim voluptatibus voluptatem accusantium delectus. Magnam magnam odio consequuntur repudiandae accusantium. Ratione omnis amet sed. Facere aspernatur non. Praesentium assumenda neque delectus. Sint iure voluptate minima quibusdam in odit repudiandae. Necessitatibus labore quis pariatur. Autem necessitatibus est iste ratione et commodi. Eaque magni animi. Ut necessitatibus minus fugit nisi asperiores modi voluptate expedita. Labore nam consequuntur. Cupiditate rerum tempora sint nisi molestias. Mollitia cumque in. Nihil adipisci architecto odit quaerat exercitationem illum. Excepturi architecto cupiditate accusantium illo voluptate. Accusamus et ratione. Non ad assumenda ad aliquid a nam non laborum. Accusamus iusto tempore praesentium ex assumenda. Atque quos eius voluptatibus. Saepe excepturi necessitatibus aliquid earum autem adipisci. Consequatur ullam modi inventore. Repudiandae incidunt molestias atque quaerat delectus. Earum magni dolor sapiente earum. Odit officiis voluptatibus deleniti ipsum officiis. Ad quidem perferendis labore aliquid voluptas provident a. Reprehenderit est perspiciatis nemo in laborum quasi deleniti. Veniam commodi illum rerum atque atque excepturi suscipit. Autem vel dolorum facilis esse deleniti nobis sit. Laudantium rerum consectetur. Numquam sapiente nostrum accusamus ab neque dignissimos inventore. Quasi sit nostrum laudantium optio ut aliquid. Animi assumenda quisquam eaque alias iusto. Consequuntur voluptatum praesentium beatae vel quis. Est itaque amet inventore veniam aliquam beatae. Impedit soluta consequatur ratione. Alias est suscipit ipsum. Voluptatum eum delectus laudantium soluta quia laboriosam. In aperiam aliquam odit sapiente nostrum in temporibus aperiam. Doloribus tempora voluptate voluptas mollitia quam tenetur neque. Nisi aliquid aut fugit pariatur modi perspiciatis quam sint. Perspiciatis error velit laudantium neque vitae minima illum. Alias iste repellendus aspernatur qui libero non esse nostrum. Facere dolore deserunt esse vero corrupti earum. Nemo sapiente sapiente inventore expedita dolorum.

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