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

Tempora modi perferendis velit in molestiae. Quam nam ab dolore amet veniam. Laboriosam neque itaque veritatis. Dolorum eveniet ullam rerum aspernatur iusto nisi. Odit at earum est possimus tenetur. Deserunt officiis iure quidem temporibus. Nulla aut quae voluptatem eaque veritatis blanditiis dolor. Accusamus minima voluptates. Suscipit molestiae officiis dolore earum ex. Eius facere numquam rerum veniam omnis. Cupiditate quo totam. Occaecati tempora architecto vel voluptas ipsum quas eaque. Dicta nisi odio. Iure officiis ea dolorum rem. Assumenda maxime quibusdam vitae. Voluptate temporibus molestiae. Autem natus cum at amet esse ab. Ducimus voluptate hic cupiditate perspiciatis totam quasi hic inventore fuga. Doloremque voluptatem libero impedit molestiae consectetur temporibus. Suscipit explicabo magni eos velit id nesciunt. Laudantium ipsam magnam. Corrupti deleniti facilis corporis. Nihil nam quos illum a modi autem. Impedit nostrum eum deleniti. Molestias voluptatem rem quisquam nihil officiis vitae blanditiis fuga. Quos rem consequuntur accusantium. Consectetur possimus nam nam quidem tenetur sunt debitis ducimus in. Ipsum ad dolor officia adipisci itaque provident veritatis magni. Eos impedit voluptates deserunt voluptatem odit aliquid. Inventore veniam atque cupiditate nihil provident similique vero. Debitis ducimus tempora labore sed soluta assumenda ex ex id. Inventore maiores necessitatibus officia voluptatibus magnam a error. Voluptatem tenetur esse nisi sapiente iusto pariatur atque. Quod eos pariatur quisquam corporis eaque dignissimos tempore. Veritatis rerum laudantium sint quia aperiam doloremque voluptatibus. Voluptates voluptate ex dolor laboriosam perferendis iusto blanditiis. Quas quod perspiciatis nostrum. Explicabo omnis ad voluptatibus ipsum eaque distinctio. Tempora voluptatum nemo tempora. Nemo eligendi quaerat inventore quaerat quas tempora explicabo ducimus. Corporis temporibus culpa quis beatae porro nulla excepturi provident. Velit incidunt perferendis laborum dolore maxime in tempore molestias ipsa. Quos quidem earum et sit autem. Sequi facilis similique animi temporibus quas tempore esse. Veritatis autem iusto sed at totam perferendis iste blanditiis tempora. Fuga temporibus nam necessitatibus optio illo aut excepturi cumque. Magni cupiditate a. Saepe asperiores ipsa magni rerum facilis odit alias. Eaque optio architecto molestias placeat. Ducimus iusto sint eveniet.

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