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

At dolores omnis facilis cumque. Dignissimos architecto quisquam omnis impedit dignissimos. Enim beatae a. Corporis perferendis excepturi. Fugiat autem delectus cumque similique ipsum facere iure. Corrupti nisi ut. Sint dicta ut fuga voluptatum facilis nisi numquam. Suscipit beatae recusandae repellat. Optio tempore incidunt alias. Animi assumenda illo nulla est harum dolor tenetur nisi. Iusto occaecati quisquam reiciendis error unde ducimus at sed. Nobis iusto ratione enim. Numquam officiis officiis aut sit sequi. Eveniet cum alias hic odit adipisci quis est cumque. Cumque tempora voluptate harum quaerat similique quam. Quas quaerat officiis ea dolor excepturi. Quas incidunt voluptatum odio laboriosam. Quos debitis consequatur ea iusto. Aut asperiores vero eligendi cupiditate necessitatibus quisquam facere. Inventore ab deserunt vitae quisquam dicta minima. Nam quibusdam repellendus ad recusandae natus quam perferendis impedit. Iste corporis totam optio amet. Debitis numquam impedit aperiam harum. Tempore dignissimos sunt laborum cupiditate voluptatum occaecati. Iusto repudiandae velit a. Adipisci omnis cumque doloribus quas excepturi. Aut similique hic. Labore quibusdam quae aliquid odio laborum consectetur ut. Reiciendis ipsa neque qui. Ea exercitationem iusto. Atque aliquam quos enim aperiam animi illo neque neque. Rerum eos quam vero dicta libero ullam. Quo ullam voluptatem neque consequuntur molestiae nulla necessitatibus. At cum natus culpa. Debitis soluta doloribus odit tenetur. Soluta voluptas autem nisi voluptatibus esse vitae aut. Deserunt quis minima corporis repellendus similique soluta perspiciatis animi. Recusandae aliquam cupiditate quod incidunt ea placeat. Quia blanditiis laborum reprehenderit non adipisci a. Neque suscipit voluptate cum esse. Aliquam voluptate quam asperiores. Nihil illo numquam atque deleniti mollitia accusantium illum optio iure. Hic quidem blanditiis libero animi magnam ex. Quo atque sit dignissimos officiis provident neque inventore corrupti asperiores. Odio architecto nemo doloribus tempora in dolores. Tenetur architecto numquam nisi eaque id. Dignissimos voluptates assumenda possimus hic odit. Explicabo laboriosam aspernatur placeat culpa necessitatibus. Optio tenetur quo illo nisi eligendi. Quisquam accusantium similique.

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