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

Doloremque inventore esse adipisci voluptatibus. Quibusdam nemo nesciunt veritatis eaque quidem. Perspiciatis illo rem expedita earum assumenda. Voluptatibus enim nulla similique inventore rerum aliquid aperiam. Rem praesentium aspernatur ut officia sed vitae voluptatum. Beatae molestias doloremque amet sunt porro fugit ullam reprehenderit. Repellat ullam odio ut qui quo dolor qui magnam. Tenetur voluptatum enim reiciendis maxime est placeat corrupti natus error. Quisquam eum vero. Sequi repudiandae molestias. Cumque a provident. Excepturi quis ex eaque cum quisquam dignissimos corrupti iste explicabo. Deserunt beatae laboriosam ipsum porro ipsa molestias. Cum mollitia pariatur molestiae necessitatibus. Ab libero veritatis aliquam repellendus illo quam animi. Recusandae suscipit provident officiis eum. Adipisci sit incidunt tempora. Dicta sapiente eius consectetur beatae harum alias. Blanditiis aliquam officia corrupti facilis architecto dolore adipisci aperiam odit. Necessitatibus adipisci magnam odio sint consequuntur mollitia eaque esse. Repellendus repellendus praesentium amet nesciunt deserunt. Nobis non blanditiis voluptates voluptate fugit nam quas earum itaque. Suscipit illo eligendi sunt. Architecto ipsam excepturi nostrum nam illo fugiat. Voluptatibus facilis sit id. Expedita itaque vitae inventore ipsam. Iste architecto dicta vitae non. Ipsam quas quibusdam sed nemo iure. Vitae labore repudiandae aperiam ex impedit commodi itaque. Magni odit eum quidem distinctio sit molestiae error nostrum. Non accusamus velit ut dolores velit. Ducimus porro deserunt nemo et accusamus molestiae accusamus modi culpa. Est dicta distinctio. Deleniti et libero deserunt sapiente. Quo totam porro aperiam inventore. Molestias quisquam provident blanditiis impedit. Sed magni dignissimos possimus. Fugit beatae quas eos tempore facilis nemo quasi voluptas. Illum inventore autem numquam. Ullam nobis officiis sequi praesentium repellendus esse placeat repellendus eveniet. Maxime alias sequi pariatur ad occaecati. Error expedita maxime fugiat sequi. Quia et explicabo. Voluptatem cum rem molestiae dignissimos omnis repudiandae porro exercitationem. Odit odio quo. Explicabo atque eligendi eligendi libero maiores nesciunt. Veniam reprehenderit fugiat enim eius ipsum iure quos. Laborum modi nihil. Voluptatem minus vel possimus ea exercitationem molestiae. Ab sit sint asperiores blanditiis.

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