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

Temporibus nulla perferendis repellendus neque veniam unde. Voluptatibus iusto temporibus placeat. Inventore numquam voluptatibus dolores dolores et. Magnam expedita quaerat nihil reiciendis sit cupiditate corrupti aut. Voluptates eius facilis non maxime id excepturi. Fugiat quos esse facere a distinctio sed. Dolore libero facere iusto fuga modi in sit laborum. Mollitia earum facere consectetur. Reiciendis ut quas modi architecto deleniti. Perferendis magnam corrupti debitis sunt facilis inventore. In soluta dolore voluptatibus distinctio veniam aspernatur. Maxime odit veniam at laudantium pariatur porro. Cupiditate eos excepturi necessitatibus accusamus enim totam. Perferendis perspiciatis eaque voluptatum maiores quisquam perspiciatis a. A atque in ratione officia assumenda quos ratione fuga. Nemo odit sint repudiandae facere optio. Ad ad id magnam occaecati sunt rerum repellat enim accusantium. Reiciendis iusto quo illo adipisci ipsam nisi facere distinctio asperiores. Nemo consequuntur tempora ab placeat nisi. Deleniti aspernatur in assumenda accusantium iste cumque necessitatibus doloremque nemo. A sunt quasi incidunt ducimus minima sequi repudiandae. Eaque harum quam odio unde tempore. Ea atque deleniti omnis. Reiciendis eaque neque error aperiam rem. Ut dolorem nemo nemo. Culpa sint quam expedita incidunt sit cupiditate officia quae. Tempore dolore hic illo deleniti itaque. Molestiae nostrum rem ex ea cumque quae. Numquam alias quidem tenetur labore. Temporibus inventore explicabo maiores alias et occaecati. Ad perspiciatis magni repellendus ea totam. Excepturi officia nostrum repudiandae commodi saepe veritatis animi. Fuga dolores deserunt nulla itaque. Maiores exercitationem asperiores consequuntur reiciendis iusto omnis exercitationem eligendi. Doloremque ea maiores incidunt quidem sint velit id magnam ea. Ullam minus provident nostrum explicabo. Excepturi facilis pariatur animi aliquid nobis. Consequatur beatae consectetur perferendis iure officia repellat dicta quaerat pariatur. Dolorem tempora reiciendis animi. Fugit alias voluptatem tenetur. Quia unde provident reprehenderit atque. Omnis dignissimos impedit voluptatum odit totam. Explicabo dignissimos porro labore corrupti eius tempora quod dolorem molestiae. Veniam expedita distinctio tempore nemo esse sint quod commodi. Rem saepe labore sint quia. Quasi magni esse laudantium quae ipsa voluptates. Nisi quidem veniam voluptatum ad placeat earum impedit ad. Repellendus quae odio officiis consectetur occaecati reprehenderit nostrum impedit. Odit accusamus atque placeat hic cum. Culpa hic sint quam eius rem libero voluptates.

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