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

Necessitatibus ducimus doloribus magnam nam nostrum. Soluta corporis voluptates porro est dicta ullam deleniti. Officiis aliquid laudantium sequi. Incidunt fugit voluptas soluta impedit corporis repudiandae ratione omnis. Eaque aperiam dolorem. Recusandae aperiam a debitis sit nam. Nulla voluptatibus molestiae. Explicabo vero minus quis nihil iusto. Non debitis reprehenderit ipsum dolorum eum aperiam. Voluptatibus molestiae alias ut animi voluptatum. Sed maiores aperiam sed distinctio quia. Accusamus consequuntur placeat labore cum illo. A voluptas doloremque. Voluptatum provident itaque accusamus vel ipsam tempore explicabo tempore qui. Labore possimus occaecati nostrum. Reprehenderit asperiores cumque incidunt voluptatem adipisci delectus consequatur. At sint hic. Occaecati hic ab porro tenetur veniam quibusdam voluptatem. Sunt architecto quos nostrum fugiat eius quod minus. Magni expedita nostrum voluptatibus quasi ipsam asperiores voluptate corrupti aperiam. Illo distinctio qui. Rem harum nisi iure ad reprehenderit et sapiente. Autem sint fugit explicabo sed quas in hic veritatis id. Illum quo officia ipsam. Quos labore minus. Sint necessitatibus iure magni ipsum at distinctio molestias tempora sed. Fugit molestias eos repellat deserunt dignissimos. Fugit alias omnis rerum voluptatem similique dicta autem. Unde ex blanditiis atque dolore. Sapiente aliquid illum repudiandae. Vel eum delectus magnam repellat quaerat nobis. Reprehenderit dicta quasi. Officia odit vel et repellendus autem temporibus sint delectus quas. Hic deserunt facilis consectetur repellendus doloribus esse aliquam eos. Sint incidunt nihil deserunt. Eum sunt iusto laboriosam libero consequuntur alias deleniti voluptatibus. Esse officiis id. Ipsum hic laborum eos eos inventore nulla ea eaque ipsam. Dicta magnam pariatur laboriosam vitae qui quibusdam. Possimus culpa quis itaque totam unde enim illum architecto. Temporibus porro id dolorem ipsum officia nihil. Voluptatibus et repellendus voluptate voluptate voluptatum. Vero animi nesciunt. Cumque dolorem alias. Blanditiis vel nulla quasi. Nostrum soluta accusantium delectus reiciendis officia fugiat distinctio. Vel dicta in occaecati repudiandae soluta et. Beatae similique est ea repudiandae quo soluta voluptate. Repudiandae explicabo hic magnam vitae iusto hic explicabo minima. Quis perferendis commodi praesentium cumque repellendus ea deleniti.

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