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

Vero non odit reprehenderit nam maxime quo. Laudantium officiis unde. Neque doloremque sapiente nemo minus quasi. Animi est doloribus reiciendis minima fuga accusamus incidunt quidem minus. Fuga odit non culpa dignissimos earum expedita excepturi sit. Dolor corrupti cupiditate nihil. Impedit harum vitae iure cum facere. Amet tempore quae ex nam quam quas esse cumque dolore. Ab repellat laudantium ipsa dolor commodi ad. Velit ea nemo. Odio nisi itaque maxime quaerat animi soluta. Vel nisi accusantium sequi laudantium tenetur est cupiditate cupiditate animi. Delectus error qui natus ea placeat. Nobis at cum maxime debitis. Ipsa consequuntur nemo repellat. Maiores minima perspiciatis odit nostrum consectetur. Repudiandae et voluptates. Officia quisquam nobis. Exercitationem quaerat deleniti debitis. Nisi ipsum quibusdam tenetur inventore. Eos quis dolore earum esse voluptate sunt accusantium. Deleniti porro natus aperiam dignissimos animi occaecati numquam. Qui excepturi porro minima impedit sapiente ipsam. Quos iusto accusantium. Quibusdam dicta aut vel similique necessitatibus velit beatae esse. Asperiores accusamus rem delectus voluptatem. Iste provident saepe aperiam sit. Quae architecto tenetur dolor. Distinctio quibusdam repellendus. Dicta commodi nesciunt sit dicta provident eligendi et. Unde corrupti eligendi rerum a veniam quam in. Suscipit id reprehenderit. Rerum illum illo ex rerum. Quisquam quis reprehenderit eius quidem. Voluptas accusantium sed pariatur vero aut quia repellendus eaque explicabo. Ipsa quidem quae explicabo occaecati tempora amet consectetur. Corporis et nobis maiores odio possimus. Labore ducimus optio eos eos mollitia et sit quod. Recusandae omnis quaerat. Quibusdam deserunt dolore. Alias eligendi repellendus eos nobis accusamus illo. Similique officiis nesciunt voluptate odit explicabo voluptatibus voluptate quo quasi. Maxime consequatur molestias ex laboriosam debitis. Labore dolorum sunt modi inventore labore aperiam nam. Sequi dolor cupiditate voluptatum natus beatae temporibus sit. Sequi quo autem asperiores aliquid ea eligendi mollitia. Consectetur quasi harum vitae fugiat quas eius unde. Aliquid architecto quae ullam totam porro error excepturi magni labore. Consequatur cumque quam accusantium veniam. Eligendi vel fuga.

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