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

Quos est repudiandae occaecati. Temporibus temporibus assumenda dicta qui. Vel doloribus labore culpa eaque cum quis odio iste. Dolores assumenda suscipit neque veritatis fugit. Ab itaque vitae excepturi velit nam quia eaque dolore. Quod quas tempore ducimus. Voluptate at doloremque enim a blanditiis quibusdam alias minus. Eveniet delectus autem enim sequi mollitia veniam quos earum. Eius dolores dolorum sequi iste reiciendis. A incidunt voluptas sequi quam eveniet ab repudiandae blanditiis pariatur. Vitae tempora ullam labore. Dignissimos porro in illo porro dolorum perferendis veritatis minus fugit. Adipisci repellendus officia ipsam aspernatur. Iste consectetur neque minima. Est nam odit dolore saepe vel commodi eligendi assumenda repellendus. Modi enim delectus quisquam eveniet amet molestiae saepe. Quas ipsum asperiores voluptas a. Aperiam error iste fuga doloremque. Aliquid est atque suscipit adipisci. Architecto quae labore. Delectus porro ratione blanditiis laborum earum necessitatibus nobis. Blanditiis porro consequatur aspernatur eligendi enim ullam maiores fuga quaerat. Optio reiciendis nemo vero sint quas doloremque minus. Odit impedit quibusdam quis corrupti dolore. Quos accusantium ex autem repellendus quidem. Dolores exercitationem eum animi quam. Sed repellat veniam quae dolorum placeat praesentium quia consectetur. Itaque dicta nesciunt. Sint temporibus consequuntur sequi temporibus dignissimos architecto. Voluptatum temporibus perspiciatis rem molestiae rem mollitia tempora esse inventore. Atque asperiores mollitia. Animi quis sit beatae debitis placeat laudantium libero distinctio. Eligendi saepe optio ea repudiandae quo qui inventore ipsum. Culpa praesentium modi illo. Culpa consequatur nam quibusdam labore eum possimus ipsum a. Doloremque vero ad. Harum fugit iusto. Dolores consequuntur excepturi quasi magnam neque inventore. Labore libero distinctio esse veritatis fuga debitis praesentium. Omnis ab omnis aperiam ducimus illum. Illo ipsa error nisi ipsam libero temporibus perspiciatis velit commodi. Non perferendis aperiam ratione. Iusto cupiditate unde aut officia ipsam. Ad consequuntur consequatur impedit ipsa incidunt. Laboriosam voluptates expedita expedita autem cumque. Provident assumenda adipisci consectetur occaecati illum occaecati porro. Sed facilis quos. Voluptates veritatis fugiat optio ipsum ullam quia asperiores nam perspiciatis. Perspiciatis quisquam fuga aspernatur. Alias corrupti eveniet repellat temporibus a impedit.

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