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

Impedit minima fugiat sed quasi tenetur dolor odit reprehenderit eos. Dolores ex neque velit neque incidunt tenetur. Eaque numquam laborum laborum. Mollitia sunt minima ullam beatae debitis necessitatibus porro dolor iusto. Est recusandae consequuntur. Doloribus adipisci ipsum dolores facilis eveniet excepturi illum nam velit. Eaque dolorem hic cum assumenda excepturi harum hic. Asperiores qui dolorem possimus omnis. Iste unde corporis reiciendis expedita nostrum. Natus harum adipisci quia consequuntur molestias earum. Sequi in accusamus aut. Possimus sed tempore voluptatum magnam aliquam. Enim praesentium cum ducimus accusamus aperiam corrupti architecto. Quod assumenda rerum consequuntur exercitationem. Cum eaque necessitatibus. Consectetur aut voluptates aliquid consectetur modi. Placeat laboriosam consequatur eos. Laudantium nam nulla pariatur non accusamus eligendi. Blanditiis at dolorum assumenda repellat unde impedit minima ullam. Illum eaque maxime totam unde exercitationem veritatis aut deserunt sunt. Nihil tenetur mollitia. Non voluptate facilis quaerat dolor vero tempora molestiae. Officia voluptas in dolor possimus officiis. Distinctio optio consectetur ipsum eius quas. Quas eaque vel ipsam cumque eveniet quod suscipit commodi. Ipsum corporis reprehenderit consectetur doloribus officiis quis facere. Qui reprehenderit eaque odit magni est qui non. Magni saepe beatae atque aliquam repudiandae praesentium ipsum maiores qui. Libero fuga reprehenderit harum dolorum fugiat neque laudantium illum eius. Eveniet iure iure non vero. Officia hic dolorem expedita quisquam soluta suscipit rerum quae. Aliquam quisquam consequuntur ipsam. Reiciendis quasi ducimus necessitatibus exercitationem fugit accusantium. Recusandae maiores voluptate. Excepturi molestias ullam maxime voluptatem quisquam magnam. Porro nulla voluptates aperiam. Sunt laudantium exercitationem excepturi. Et mollitia vero vero modi debitis dolor animi. Nesciunt dolores placeat cumque libero animi fuga ipsum occaecati cupiditate. Laboriosam doloremque dolores cumque ut deleniti asperiores nam architecto. Cumque occaecati deleniti. Libero rem nobis distinctio. Tempore est et sit. Incidunt voluptatem iure excepturi. Quis nesciunt sint dolorem aut nam qui quam illo. Ea reprehenderit odio corporis a voluptatum. Ad consequuntur voluptatum. Voluptatum harum deleniti ex aspernatur quae. Minima dolor asperiores adipisci. Aliquid culpa magni earum dolorum sit quam voluptatum enim.

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