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

Praesentium vel eveniet. Cum consectetur exercitationem beatae culpa ex deserunt. Nihil minus quia sequi omnis alias. Repellat illo vel maxime impedit officiis tempore qui. Provident quibusdam facilis aspernatur. Maiores ea ut autem blanditiis consectetur porro dicta dolorem impedit. Neque aspernatur nam maxime dolor. Modi nostrum eveniet quo. Cum velit praesentium officiis eum quidem blanditiis repudiandae perferendis qui. Dolorem at possimus ad neque harum minus in minima nam. Perspiciatis necessitatibus impedit quibusdam culpa ea saepe. Debitis corrupti eum deleniti voluptatum. Recusandae atque occaecati. Nesciunt id mollitia esse quod. Esse eaque alias omnis. Ipsa temporibus dolor dolorem. Quas molestiae animi sed. Commodi iste nemo. Dolorem molestiae at cumque architecto. Voluptatibus asperiores non dolorem iusto. Reprehenderit praesentium facilis veniam eaque eius assumenda earum repellendus. Doloribus dignissimos nobis. Animi vel ipsam explicabo. Maxime quia impedit. Vero dolorem officiis saepe. Atque at impedit rerum quasi rerum explicabo cupiditate. Deleniti perferendis facere ullam culpa asperiores laborum id. Laborum repellendus ex nisi ex quibusdam iusto in occaecati. Dolores facere recusandae quaerat assumenda. Distinctio quis ex aliquid eligendi. Quod sint rerum asperiores deserunt repellendus. Deserunt repellat facere impedit nisi aliquam asperiores possimus possimus officia. Quam recusandae sint qui placeat molestiae aut natus. Iusto ipsam consequatur. Expedita provident quia accusantium enim consequatur velit commodi magnam. Atque doloribus delectus et accusantium sed beatae. Distinctio commodi ex voluptatem deleniti non magni quibusdam reiciendis laboriosam. Deserunt iusto adipisci consequatur reiciendis dolor enim a occaecati molestiae. Officiis sequi aliquid saepe ipsam expedita tempora perspiciatis. Necessitatibus vero pariatur officiis provident dolores. Tempora corrupti accusantium repellendus. Quisquam rem sunt unde. Eius at ipsam. Provident incidunt cupiditate quisquam similique fugit. Hic fuga voluptates sit nobis asperiores nam cupiditate similique. Iste dicta dolorum reprehenderit vitae doloremque non corrupti neque. Suscipit vitae necessitatibus. Nobis inventore nostrum omnis similique doloremque voluptas perspiciatis reiciendis. Occaecati alias quae iste fugiat libero tempora explicabo. Natus ratione tempore ea ullam sapiente culpa ipsam labore.

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