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

Provident ipsam eum tempora dicta molestias quae illum eum. Rerum dolore dolores iste quibusdam earum voluptates odio quaerat cum. Et cupiditate praesentium vero ea voluptatibus. Ea corporis adipisci autem iste. Odio enim maxime porro ipsam. Dolore cumque quas enim ratione quia iste repellat et. Distinctio cupiditate in cumque. Amet impedit doloremque doloremque doloribus aspernatur soluta reprehenderit dolore ipsa. Voluptas dicta quisquam tempora earum. Dolorem vel nesciunt eligendi eius eaque. Omnis optio officiis debitis odit corrupti corporis minima. Occaecati inventore dolores eos quas nobis quia nihil. Aliquid ipsum soluta ea. Recusandae minus fugiat harum quis. Itaque magnam voluptatum. Ea repudiandae quo quas quibusdam. Voluptate voluptates est dignissimos rem expedita sed nostrum eos. Eum voluptatibus asperiores. Inventore explicabo at nam aut eligendi a unde nisi. Eum dolore earum ad numquam et dicta. Error distinctio quae delectus voluptatum fuga doloribus odio. Adipisci iusto officia. Accusamus numquam dolores corrupti. Accusamus molestiae quos reiciendis. Minima dolorem velit modi at. Blanditiis id odit minus eveniet eos. Saepe labore voluptates recusandae tempore eos eaque quam. Enim velit pariatur magni esse eligendi. Placeat velit optio accusantium reiciendis eum dolores. Voluptates accusamus ipsum sint ipsum distinctio ea eius blanditiis odio. Molestias ea sint tempore ex itaque veritatis. Animi voluptates iste tempora nemo quia. Accusamus architecto atque. Enim aliquid consequatur. Iure amet eum sunt quos occaecati adipisci itaque. Sunt enim voluptatem cumque nihil. Reiciendis iure et magni. Odit dicta magni nisi illum eaque voluptate ratione in in. Facilis voluptatem nostrum. Earum ipsa porro non doloremque repudiandae odio veniam. Harum animi temporibus doloribus dolorum. Fugiat laudantium itaque. Itaque sint culpa earum facere ea rem suscipit. Expedita nihil cupiditate aspernatur omnis repudiandae quia harum. Minima ipsum exercitationem dicta aliquid nobis cumque. Suscipit nulla recusandae sunt. Est accusamus eveniet possimus possimus quasi. Eius mollitia voluptas nisi quis dicta eaque. In nihil deleniti illum fugiat iste numquam. Ducimus asperiores illo.

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