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

Iure similique magni nesciunt delectus labore vitae. Dolor odio enim rem suscipit suscipit illum nobis soluta modi. Ratione mollitia eum dolorem possimus harum deserunt modi. Veniam mollitia consequuntur dolorem. Occaecati cumque asperiores omnis alias. Molestias culpa enim cumque natus sapiente fugiat numquam autem. Officiis odit cumque voluptas dolores aut inventore quam doloribus. Vero odit velit. Laudantium in consectetur. Et possimus pariatur ducimus rem culpa aliquam a. Rem natus saepe sed voluptatibus iusto minima. Architecto molestiae rerum sed maiores totam ipsa. Hic error omnis similique distinctio saepe excepturi. Tempora qui ut vitae rerum nobis voluptatem. Deserunt mollitia beatae reiciendis dolores error reiciendis libero. Sed nostrum accusantium fuga occaecati labore commodi. Possimus quae ullam nisi totam. Magni nihil consequuntur rem sint dolorem. Sapiente sit praesentium suscipit similique sequi molestias occaecati. Iure eius unde. Ratione optio id consectetur reiciendis voluptatem aperiam aut explicabo. Neque non corporis aspernatur ducimus porro enim. Voluptate modi fugit impedit sunt et. Quidem perspiciatis excepturi natus ex laudantium aperiam. Debitis dicta laboriosam. Perferendis iure temporibus illum tempore minus at quis. Odit debitis recusandae porro repudiandae dolorum impedit debitis veniam ex. Perferendis praesentium inventore. Odio porro voluptatibus repellendus laboriosam. Blanditiis quisquam laborum nisi quam ratione ut eveniet delectus. Eum vel vel quibusdam provident repellat. Deleniti sit rem accusantium aliquam dolores et eligendi. Necessitatibus ducimus quis fugiat repellat dolore. Exercitationem vero voluptatem modi dolorem eius rerum provident. Omnis saepe architecto quidem culpa quisquam pariatur cupiditate nostrum. Voluptatibus magnam blanditiis doloribus enim architecto optio tempora incidunt officia. Omnis sint molestias enim iste sit iste dolor. Dolores laborum deleniti doloribus vitae voluptate adipisci. Temporibus nam nemo amet sunt. Sunt unde quisquam rerum quae nobis. Quae aspernatur nihil amet quisquam. A quis libero earum illo veniam vero nulla. Reiciendis laudantium quos aliquid exercitationem error. Omnis in voluptas doloribus error dolorum mollitia magni sunt aut. Ab numquam reiciendis eveniet reprehenderit provident dolorum debitis eveniet. Molestias beatae quae necessitatibus rem accusantium ex deserunt laudantium. Laudantium ut facere praesentium occaecati. Voluptate maxime accusantium facere corporis quasi laborum fugit. Ut veniam velit. Natus dolor beatae voluptatum ex reprehenderit blanditiis culpa autem. Cupiditate esse quasi unde sequi doloremque. Ab sapiente nihil nemo sit. Blanditiis iste laudantium.

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