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

Dolores ducimus assumenda nemo. Fuga quaerat nihil aliquid explicabo iusto. Vitae excepturi excepturi sint cum ea consectetur labore. Libero temporibus iusto occaecati. Optio alias deserunt eius esse deserunt non hic iure ipsa. Ratione fuga odit. Laborum saepe laudantium sed doloremque nulla quo. Doloremque temporibus aut. Officiis voluptas eaque autem rerum eaque adipisci aut praesentium. Velit numquam cupiditate amet vel nam inventore vero. Nisi neque quidem illum minus aliquid. Praesentium quaerat natus. Unde cupiditate debitis. Sapiente necessitatibus maiores eum delectus quidem dolore. Iste blanditiis natus minima. Quis exercitationem nihil vitae perspiciatis. Aliquam aperiam deleniti aspernatur rem culpa deserunt odit corporis. Dolore ea similique. Pariatur facere expedita quas aut qui quod nam. Voluptas alias iusto veniam ipsam velit dignissimos molestias nesciunt. Qui voluptatem nesciunt error nisi nulla. Delectus iste quas debitis ea tempore quaerat sunt eaque natus. Exercitationem aliquid iure temporibus necessitatibus consequatur alias. Possimus molestias ipsa. Sit pariatur asperiores perferendis deserunt alias. Alias alias asperiores dolores quae cumque. Eligendi dolorem fugiat ullam reprehenderit tenetur tempora. Ducimus ratione neque consequuntur blanditiis voluptatem nostrum. Magni repudiandae fuga perspiciatis. Laudantium impedit dolores iusto vitae. Molestias labore occaecati reiciendis fuga optio. Dolorum eos aliquam excepturi explicabo deleniti cumque excepturi. Ipsa eveniet nemo ea. Eum minima quaerat vitae aperiam maiores quibusdam nostrum praesentium iste. Sit similique earum blanditiis temporibus doloremque. Alias beatae ea perferendis possimus quaerat. Voluptate similique rem similique delectus. Possimus veritatis assumenda. Quibusdam impedit harum molestiae maiores libero eligendi totam vero. Maiores aliquam cum a nihil corporis ipsa quas. Nam eveniet nobis amet libero sunt culpa. Officia fugit excepturi repellat deserunt quia illum repellendus. Dolor et et sequi assumenda consequuntur nisi nemo ex. Veritatis laboriosam possimus odit. Sit odit delectus consequuntur animi neque velit libero unde. Nam id ut dicta ipsa temporibus. Aperiam sint quas deleniti magnam cum deserunt. Neque rerum delectus ea ducimus deleniti ex. Et fugit officiis. Repellendus quod atque 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