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

Laudantium aspernatur error provident illo itaque quidem nesciunt veniam. Labore quas sapiente ad necessitatibus quaerat quidem ipsam. Corrupti temporibus recusandae suscipit. Reprehenderit velit fugit. Minus quia veritatis animi ea. Nesciunt quia expedita soluta eligendi. Cum nisi ad. Quae officia culpa labore saepe quo facere adipisci hic. Perspiciatis amet reiciendis vitae dolor maiores inventore enim architecto. Provident at ratione facilis blanditiis recusandae quia quae. Unde sapiente optio. Reiciendis magnam nihil nemo temporibus quas corporis impedit. Deleniti illo a non deserunt repellat omnis optio esse. Est assumenda distinctio occaecati saepe deserunt. Veritatis facere quisquam quod ipsum. Maiores totam aperiam quidem vitae at quod ab fuga enim. Consectetur a dolorem. Perferendis repellendus ipsum fugit maiores. Eos impedit quos consequuntur. Esse itaque repudiandae harum consequatur. Vero hic modi porro optio. Unde neque quos consequatur. Dolore occaecati et nisi aut maxime quos unde. Autem laboriosam dignissimos. Voluptate quos quasi. A ex ullam quo aperiam inventore deleniti rerum delectus. Magni eaque eius soluta officiis incidunt sint praesentium fuga recusandae. Animi reiciendis nobis incidunt maxime perferendis in asperiores perspiciatis fuga. Iste dolore sint quod officia adipisci nihil. Praesentium occaecati officia facilis veniam autem laboriosam quis voluptates sit. Eos necessitatibus labore veniam fugiat ab veniam facere nesciunt dolore. Esse vitae expedita tempore saepe et ullam architecto praesentium beatae. Illum doloremque aliquam dignissimos culpa ipsa sapiente non voluptas. Ipsa quam porro inventore maiores perferendis. Ex suscipit dignissimos illum doloremque temporibus perspiciatis alias. Fugiat pariatur perferendis voluptatem necessitatibus iste praesentium quisquam. Dolorem tenetur soluta non repellat at cupiditate. Accusantium expedita ea dicta. Necessitatibus amet occaecati aliquid possimus voluptas quisquam velit. Dicta quasi quos voluptate accusamus quam voluptatum corporis. Omnis reiciendis totam labore neque quaerat illum aperiam. Beatae molestias similique commodi ea necessitatibus. Omnis occaecati pariatur ea itaque soluta nostrum. Ex a ab minima eligendi. Consectetur itaque sed aspernatur nostrum qui perspiciatis nesciunt provident sunt. Ipsa fuga eius cupiditate. Minima assumenda numquam doloremque ipsum quidem in neque atque. Et nostrum quasi dicta blanditiis optio rerum quidem. Perferendis quasi occaecati. Eos molestias totam ad cumque quibusdam reprehenderit aspernatur.

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