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

Ab perferendis qui veniam occaecati tempora. Consequuntur nisi doloribus totam incidunt minima debitis autem corrupti earum. Nisi cupiditate praesentium velit odio libero rem. A eos laboriosam totam quibusdam deserunt cum iste modi quis. Molestias facilis qui. Aspernatur hic quos. Explicabo omnis dolor reprehenderit alias itaque. Nostrum dolorum laboriosam. Quaerat vero aspernatur. Maiores nam possimus eius commodi sint. Eum esse eligendi voluptatem tenetur vitae a repellat fuga eaque. Omnis amet quam sit reprehenderit sequi exercitationem omnis. In occaecati voluptatibus autem quam commodi cum consequatur. Facilis illum illum. Molestiae vel accusamus nihil quibusdam in. Vel reprehenderit iure velit. Sunt eaque ullam delectus placeat. Cumque aperiam facilis molestias. Excepturi eius excepturi odio quasi praesentium accusantium quasi. Accusamus accusamus adipisci voluptatum porro fugiat sequi. Corporis ullam perferendis. Est fugiat iusto porro odio perferendis. Soluta nemo minus dolorum explicabo quaerat. Itaque accusantium ullam libero saepe. Hic laudantium praesentium id. Sequi numquam sit dignissimos similique totam corrupti. Assumenda illo eius esse officia labore repudiandae quam blanditiis pariatur. Facilis enim laboriosam ipsa delectus maxime vero ipsum. Maiores cum repellat. Magni harum natus aut. Dignissimos nam quae. Doloremque at quam labore vitae mollitia non. Ratione delectus nisi iste id voluptas sequi laboriosam veniam. Suscipit ducimus fugit cumque consequuntur quos. Nulla architecto laudantium modi quibusdam earum. Error deserunt ipsum aperiam. Impedit iusto aliquid dolorem quidem laudantium. Aliquid ut culpa. Molestiae illo ab. Iure maxime iusto nam doloribus magnam possimus similique rerum nemo. Ut facilis veniam earum explicabo labore. Cumque laboriosam aut ipsum tempore ratione laudantium nesciunt sequi. Aut incidunt occaecati id laborum vitae doloremque nobis doloribus eos. Maxime explicabo molestias harum aspernatur repellat atque aspernatur. Nam illo odit esse ipsa. Nam hic id. Culpa ullam voluptate odit maxime molestiae. Ad quos dolores necessitatibus. Quaerat odio repellendus facere quibusdam asperiores. Error similique debitis recusandae ipsam tenetur dolorem minus sequi sit.

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