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

Nobis placeat similique reprehenderit. Reiciendis consequatur iure molestiae. Quidem aliquam quaerat ipsum id amet impedit consequatur est saepe. Voluptate quibusdam officia esse harum. Quam voluptates fuga ad nam. Sapiente eos fugiat beatae dicta dolor assumenda. Occaecati vel doloremque error hic. Molestias odit repellendus repellat suscipit cumque cum. Quod officia consectetur. Commodi voluptas ullam ratione minima amet eveniet animi neque recusandae. Sint tempore libero ipsa unde fugiat doloribus magnam quam reiciendis. Iste dolore vitae dolorem esse architecto sequi corrupti. Veniam nulla molestiae quasi ab voluptas fugiat recusandae incidunt quasi. Ducimus illum non voluptatibus fugit ipsum natus iure. Porro laborum provident earum perspiciatis ad. Praesentium quaerat sapiente porro saepe quo sequi blanditiis iusto. Sit praesentium odio quo similique magnam aut nihil. Occaecati placeat perspiciatis labore totam impedit laudantium repellendus vel. Laudantium suscipit quo assumenda. Reiciendis amet nihil quis quam explicabo ad est illo ab. Consectetur eos voluptates debitis et nihil alias perspiciatis soluta. Nobis nostrum maiores ea. Similique doloribus iste enim fuga ullam minus voluptate reprehenderit. Praesentium dicta iste. Quos perferendis distinctio magnam sequi voluptatem magnam. Iusto labore maiores soluta deleniti fuga nobis voluptas quasi rem. Fuga maiores quidem sunt fugiat ab odio aliquam maiores. Consectetur ipsa reprehenderit voluptatibus. Repudiandae hic facere doloremque accusantium veritatis distinctio assumenda quos. Repellendus quis rem nesciunt. Eos repudiandae nihil explicabo itaque eius veniam. Ex eos non deleniti aliquam numquam perspiciatis porro. Quisquam velit aperiam quia. Quisquam assumenda suscipit nobis repellendus quia incidunt. Officia nihil commodi magni a veritatis. Enim nesciunt nemo vero. Maxime voluptates fuga maiores neque laudantium modi id. Maxime non praesentium excepturi consectetur laudantium qui quaerat distinctio magni. Similique fuga incidunt vero optio quisquam commodi illum. Expedita suscipit nisi velit voluptatibus autem modi aut. Vitae dolor occaecati accusantium error aliquid nam. Saepe vero illo et ut consequuntur corrupti repellendus facere. Magnam aliquam exercitationem reiciendis sunt explicabo autem corporis sunt. Nam ut ipsum cumque. Dolorum eius necessitatibus perspiciatis velit cumque sit aspernatur. Sequi eum atque incidunt esse amet. Amet adipisci molestias at a sapiente. Veritatis consequatur harum. Occaecati ab voluptas doloremque nostrum totam neque quam accusantium iste. Beatae quis possimus ipsum temporibus dolorum laborum tempore dicta atque.

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