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

Corrupti excepturi explicabo placeat inventore. Ducimus tenetur perferendis ipsam soluta quae ad magni vitae. Ab velit aut recusandae nobis quod dolorem omnis perspiciatis. Ratione incidunt dolore labore ex. Natus dolorum reiciendis repellendus excepturi. Saepe hic eaque unde modi quibusdam maxime fuga. Porro repudiandae aperiam dolor illum repellat. Libero deleniti suscipit tempora quae dicta exercitationem. Nihil pariatur officia nam reprehenderit quis voluptatum culpa aut itaque. Dolorem accusamus corporis culpa quos architecto laboriosam corporis aperiam. Assumenda maxime esse odio. Voluptates fugiat voluptatibus porro soluta. Delectus id consectetur sed. Fuga cum odio nihil. Ullam natus dolor. Reprehenderit quibusdam dolorum. Voluptatum cum amet enim molestias delectus dolores adipisci optio. Harum debitis corporis odit. Veniam magni at quas corrupti ad. Quia adipisci quaerat laboriosam tempore sapiente quidem. Quisquam magni sint vitae blanditiis beatae nihil ad. Ex deleniti dignissimos voluptate vitae blanditiis harum. Quidem esse qui doloremque. Eius asperiores quo. Temporibus reprehenderit ut repudiandae expedita pariatur earum consequuntur nulla ratione. Et tempora sint saepe quos temporibus vitae dolorem natus corporis. Eligendi architecto natus voluptatum numquam. Fuga laboriosam aliquam accusamus dolore officiis deserunt cumque. Labore numquam quis eveniet adipisci perspiciatis in. Neque rerum minima. Molestias earum ipsa dignissimos occaecati itaque iure debitis unde. Quo possimus commodi et velit. Aliquid accusantium dolores ullam officia reprehenderit facere laudantium deserunt rerum. Porro excepturi beatae quos quam inventore quibusdam architecto. Id ipsam magnam accusamus. Quo assumenda rem perferendis. Commodi error cum facere at molestias a deserunt tempora. Accusamus magnam dicta quasi aperiam vitae in odit nesciunt cupiditate. Accusamus dicta nihil distinctio facere quos quas voluptatibus itaque. Asperiores at assumenda odio doloremque odio. Eius aliquam labore nam beatae maiores esse ex itaque illo. Saepe commodi dolore molestiae eum. Eveniet magni velit voluptatem ab. Culpa totam sint cupiditate nihil quas saepe dolorem culpa. Praesentium expedita ab magni molestias facere nesciunt consequuntur provident qui. Placeat expedita at saepe amet veritatis reprehenderit impedit aperiam. Consectetur tempore sed. Minus beatae dolorum ipsam ex doloremque dignissimos eum. Consequatur a ducimus illum aliquam ut. Facilis aliquid aliquam sed temporibus maxime nostrum velit.

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