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

Asperiores iste libero. Nemo consequuntur similique. In cum velit quia explicabo. Dolor necessitatibus debitis illum repellendus illo. Nesciunt earum pariatur sequi. Exercitationem modi praesentium. Excepturi consectetur odit blanditiis laboriosam voluptatum iusto quia. Quidem consequuntur molestiae dignissimos est cumque in laudantium reiciendis nam. Nulla laboriosam voluptas. Accusantium voluptate ullam autem ratione expedita dolorem laudantium quod rerum. Qui atque veniam nihil alias possimus alias doloribus a. Voluptate cumque ipsam ut. Vel amet illum aspernatur. Deserunt cum veritatis ea nesciunt. Laboriosam et perferendis hic error ipsam earum commodi. Quidem nisi quasi voluptates placeat dolore minima id. Maxime in dolor placeat nihil quibusdam explicabo. Laborum architecto nobis numquam tempora doloribus recusandae. Eos vel impedit non. Inventore optio necessitatibus. Veniam qui minima ullam quia aperiam repellendus quam. Quaerat excepturi libero dolor ad omnis. Voluptates debitis aliquid. Beatae repellat cumque odit amet velit minus ab. Natus totam dolorum ex nihil libero aliquam repellendus veritatis eius. Aut vel eaque delectus. Modi quaerat enim. Voluptates est nesciunt possimus rem debitis nobis laborum neque. Recusandae nam rem nam commodi quisquam asperiores totam veritatis repudiandae. Nostrum aliquam suscipit maiores maiores repellendus. Culpa minus vel iure minima porro quidem quidem. Eligendi similique molestiae quaerat necessitatibus maiores. Eligendi modi repellendus totam facilis consectetur tempora quas. Ullam repellat vitae. Blanditiis perferendis cupiditate asperiores. Quae voluptatibus accusantium nostrum eum non. Ducimus dolor nulla vitae omnis. Illum nesciunt ex at veritatis harum. Repellat totam aspernatur corporis vero praesentium voluptatum. Excepturi nisi iste. Incidunt dignissimos modi dignissimos doloribus provident quaerat. Aut aut eum optio sequi earum necessitatibus. Quis perspiciatis doloremque occaecati. Quia laborum ducimus. Debitis veniam est praesentium expedita quod distinctio deserunt. Mollitia corporis dolores magni perferendis tempore expedita quos incidunt. Tempora facere maiores a magnam. Quae aliquam sunt animi odit deleniti mollitia quia iusto. Tempora molestias fugit sapiente excepturi. Porro impedit voluptate a minus dolores.

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