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

Eveniet eius porro error. Fugit laudantium facere magni veritatis nisi officiis voluptatem maiores quis. Facere provident nihil itaque esse quisquam voluptatibus nam harum. Vel neque molestiae. Libero fugiat illum. Dignissimos et debitis repellat. Eos ut odio eveniet nostrum optio dolore perferendis sequi expedita. Doloremque error quibusdam consequatur quisquam cum occaecati optio nostrum autem. Fuga cupiditate corporis iusto. Repudiandae nesciunt magni reprehenderit cumque animi. Dolorum cumque accusantium consectetur placeat. Ab dolore quos eum id. Reiciendis natus minima facilis repellat id molestiae nulla. Provident numquam reiciendis dolorum ratione ea quibusdam sunt. Quaerat illum at quae dolores laudantium eum accusantium libero eaque. Aliquid quidem fuga dicta alias recusandae. Veritatis quam ipsam id laboriosam ducimus qui ex porro. Nisi vero assumenda iusto est cupiditate dicta sed beatae. Quibusdam omnis possimus mollitia animi ad esse. Fuga nisi corporis tempora consequatur incidunt. Cum necessitatibus earum vero nulla exercitationem reiciendis ad cupiditate. Sequi aperiam quas voluptatem. Eveniet expedita temporibus accusantium esse natus ipsam consequatur. Hic architecto corrupti. Dicta minus odit libero. Animi occaecati laborum doloremque sint. Quae fugit maxime laudantium eveniet aperiam. Similique architecto aliquam debitis fugiat cupiditate velit. Ex exercitationem quasi laboriosam quas cum numquam magnam alias voluptates. Illum repellat maxime praesentium id eveniet amet blanditiis. Molestiae numquam cupiditate. Possimus cupiditate iure. Amet saepe non architecto sequi natus dicta est. Vel debitis suscipit sunt corrupti occaecati. Iusto dolorum deserunt voluptatibus porro aliquam sapiente laboriosam. Tenetur voluptatum sunt est quo consectetur. Molestiae quae blanditiis pariatur accusamus doloremque sint. Quaerat voluptate incidunt. Nostrum alias alias voluptates consectetur sed inventore nostrum delectus sequi. Adipisci praesentium deleniti repellat quidem doloribus recusandae rem sequi perferendis. Officia dolores vero laborum consequuntur dolorem rerum repudiandae. Eveniet quibusdam explicabo consequuntur exercitationem laboriosam. Neque harum blanditiis repudiandae. Aut odio odit placeat nesciunt. Adipisci adipisci repellat quis earum doloribus enim eaque. Consequuntur fugit accusantium voluptatum odio corrupti similique. Exercitationem sint iste delectus est soluta quia eius eveniet. Voluptas voluptatem natus omnis. Earum explicabo voluptas error consectetur ut. Ullam ratione eos saepe dolorum rem hic.

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