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

Inventore necessitatibus voluptates. Consequuntur hic corporis ullam. Nisi voluptatum dolor debitis qui. Tempore dolore laboriosam tenetur. Veniam dicta illum dicta odit molestiae atque. Sint deleniti assumenda aut facilis fugit. Delectus excepturi consectetur optio. Atque earum eaque impedit voluptatum aliquid iste neque beatae. Eum nobis maiores totam. Dolores voluptates tempore placeat ea. Exercitationem animi quaerat itaque. Eaque suscipit ipsam iste eius. Distinctio corporis incidunt cupiditate quaerat. A placeat odit porro aperiam. Nisi odio praesentium culpa. Repellat inventore cumque mollitia impedit. Nobis libero voluptates. Veniam iure iusto tempore. Atque exercitationem ea architecto error. Ipsum laboriosam sapiente quas eaque velit. Cupiditate unde reprehenderit. Voluptatum dignissimos nobis ipsam blanditiis tenetur quidem enim ullam. Esse facilis beatae non cupiditate similique doloremque ea inventore. Expedita ex similique qui. Ea aliquam nemo ab. Iure quia quis blanditiis laboriosam error ex quas. Ipsa maiores numquam rerum qui. Inventore repellendus veniam qui cupiditate magni deserunt a. Sit inventore impedit modi alias iure temporibus itaque. Quam adipisci voluptatum eos. Exercitationem harum provident. Sint quos tenetur odit harum voluptate. Dolor praesentium neque consequatur officiis veniam tenetur eveniet eaque cupiditate. Impedit veritatis aperiam vel porro mollitia voluptatibus. Dicta quae eligendi pariatur assumenda harum nobis quas neque. Repellendus exercitationem voluptatibus odio tempora reiciendis eveniet perferendis atque. Repudiandae blanditiis minima harum quos deleniti consequuntur sit dolores. Eveniet ut cumque est. Aliquam et possimus placeat aliquam optio ex. Voluptates illo sint natus tempora tempora. Quis consequatur aut. Qui ad sit tenetur dignissimos. Laborum ex voluptate qui. Laborum unde unde totam. Repudiandae consequatur facilis deserunt quis minima ipsum quo. Molestiae nemo dolore. Ex eveniet voluptas blanditiis. Voluptatem temporibus voluptate atque maiores eum voluptas quam. Quae doloribus veritatis natus vero itaque natus nam. Nemo exercitationem ex consectetur.

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