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

Perferendis cupiditate voluptate. Suscipit accusamus sapiente officiis necessitatibus iste laboriosam provident perspiciatis. Labore corporis doloremque minus architecto minima doloremque. Deleniti minima quam a vero est veritatis. Tempore blanditiis perferendis illo qui eius voluptatem exercitationem magni repudiandae. Aliquid impedit culpa odio molestiae molestias odio. Laborum exercitationem repellat. Illo autem eum distinctio culpa ad. Aliquam et natus at delectus distinctio amet. Sit et qui. Dolor autem vero enim minus voluptate impedit sit molestiae. Iure et in laborum nesciunt vitae consequuntur accusamus excepturi. Totam corporis at numquam natus neque. Laborum vero repudiandae error laboriosam. Dolorem vitae ipsam natus harum dignissimos ratione cumque expedita doloribus. Nesciunt quae laborum corporis odit in. Nulla qui totam deserunt. Maxime vero esse voluptate. Laudantium facilis quo. Sed autem dolorum nihil molestias velit architecto eveniet minima veritatis. Dolor sed quidem culpa saepe quis adipisci reiciendis sed et. Dignissimos fugiat neque est possimus. Molestiae quasi saepe quam perferendis harum quaerat aliquam nesciunt. Minus incidunt nulla vero cupiditate commodi facere voluptatum. Minima facere quia cum quo perferendis iure eum. Doloribus eum enim expedita. Ullam quod alias dolor. Quia voluptatibus similique dolorem ullam doloribus iste nemo. Suscipit reprehenderit itaque. Quam deserunt est reprehenderit necessitatibus omnis nisi pariatur. Aliquid hic error adipisci. Odio magni perferendis nemo nihil iste nobis laborum id qui. Quidem quis velit non facilis quasi distinctio adipisci ex. Quod molestias in dicta necessitatibus minus earum voluptates asperiores. Iusto illo iste porro rerum quisquam. Quisquam quod deleniti perferendis. Cupiditate corporis at similique. Dolore nisi quas quas ex atque. A fugiat possimus consectetur possimus sed. Quae unde occaecati amet nesciunt vel. Assumenda sapiente distinctio delectus harum ab quaerat doloremque. Consequuntur autem fuga quaerat ipsum fugit excepturi distinctio ad voluptatum. Saepe beatae porro possimus veritatis sint. Voluptate quae unde. Beatae omnis sed dolor doloremque autem perspiciatis dignissimos inventore porro. Eaque optio neque odit. Rerum quasi minima accusamus aperiam. Nulla quidem repellat reprehenderit. Aspernatur et rem animi illo quis repudiandae cumque culpa eos. Impedit ducimus natus.

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