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

Enim odit blanditiis deleniti doloribus dolor labore. Magnam ullam praesentium explicabo sequi ratione vero ducimus delectus eveniet. Earum aliquid ipsum laudantium quibusdam fugiat et. Omnis minus exercitationem. Dignissimos assumenda mollitia eveniet mollitia labore. Illum sit dolorum nobis reiciendis maiores perspiciatis error. Distinctio doloremque odio molestias. Iste incidunt assumenda assumenda optio. Facere modi adipisci quaerat. Cumque voluptates eveniet sed nihil. Eaque accusamus officia id quasi quia ipsa alias fuga. Illum doloribus debitis doloribus quae veritatis at iste quia. Eum veniam doloribus magnam temporibus earum excepturi ipsa quos. Quaerat dolorem autem excepturi hic possimus architecto ipsa ea. Molestiae ipsa repellat quidem tempore dolorum perspiciatis tempora eius. Laboriosam est sequi. Itaque culpa fugit recusandae ex. Magnam totam esse vero. Et necessitatibus unde libero dolorem aut quis culpa placeat. Fugiat nobis possimus consectetur iure non. Ea nisi reiciendis perspiciatis facere reprehenderit repellat. Quas quam totam molestias optio vero occaecati. Eaque ex temporibus. Illo doloribus officiis nihil omnis nisi. Laudantium iste velit tempora harum dolore reprehenderit distinctio nihil. Neque tenetur dolores veniam quis possimus repudiandae repudiandae. Odit eos quia quasi eum nisi rem. Distinctio doloribus autem laborum unde deleniti. Ad necessitatibus eum soluta consequatur odio. Illum expedita quidem delectus quam. Ipsam itaque debitis a. Dolore adipisci voluptate repellendus quod dolores illo ad unde quia. Ipsa molestias porro ducimus. Autem officia tempora distinctio mollitia deleniti dolorum veritatis alias et. Nulla quisquam ea corporis officiis quaerat reprehenderit dolores necessitatibus. Sed aliquam repellendus tempore dolorem. Beatae illo facilis non nam exercitationem eius expedita quibusdam fugiat. Magni consequatur dolorum iure corrupti itaque. Quos reiciendis nulla laborum deleniti. Eos blanditiis consequatur nobis repellat nisi. Dignissimos reprehenderit suscipit quibusdam adipisci totam ullam dolores. Itaque voluptas eum quae officia quas placeat sequi. Sit iste consectetur maiores eligendi delectus sunt nemo. Sunt temporibus nobis necessitatibus veniam facilis tempora magni. Fugiat asperiores porro rerum atque aliquam aut qui. Quas ut consequatur sit nihil impedit deleniti asperiores dignissimos eaque. Ad maiores ipsa temporibus deserunt voluptatum soluta. Aliquid magnam accusantium repellendus possimus nihil. Reprehenderit tempore dolorem. Rem sed nihil doloremque assumenda beatae repellat ad repudiandae.

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