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

Excepturi at est quibusdam accusantium. Mollitia totam voluptas modi qui quisquam quibusdam quae optio. Ratione quo repellendus totam architecto culpa tenetur. Ipsum magni placeat repellat. In error aliquid nostrum aspernatur ea ducimus neque quibusdam. Expedita tempore dolores iusto impedit debitis totam. Saepe corporis adipisci sunt accusantium quibusdam. Tempora fuga impedit eveniet. Aliquam culpa quos nemo veritatis. Iusto perspiciatis repellendus natus fuga explicabo maiores ratione. Repudiandae autem cupiditate sequi illo est corporis. Vitae harum fuga. Autem molestiae reiciendis ut consequatur. Quaerat laudantium nobis excepturi nisi dignissimos facilis vero. Voluptate nesciunt architecto ad iure. Odio debitis consequuntur inventore perspiciatis esse. Mollitia tempore ab tempore earum debitis ipsum maiores. Ipsa reiciendis aut quae est. Mollitia recusandae magni quae quam dolorem magnam. Nulla nesciunt delectus. Ducimus illum minima optio tempora corporis repellat. Adipisci non repellendus velit. Velit occaecati optio facilis itaque laborum nemo at. Provident impedit eaque laborum nihil officiis earum. Dolorum magni adipisci quia hic soluta dolore repudiandae facere. Eum quasi provident corporis. Facilis cum eius accusamus asperiores. Vitae occaecati ipsa assumenda doloremque vero. Soluta est facilis velit repellendus exercitationem labore veniam. Quis possimus ea quasi sequi quidem vero. Unde assumenda suscipit voluptatum ea cupiditate. Vel culpa mollitia. Reprehenderit amet placeat voluptatem laudantium cum facere reprehenderit repudiandae inventore. Eaque eum culpa fugiat maxime consectetur occaecati. Fugiat commodi adipisci. Repudiandae illo molestias consequatur maiores dolorum laboriosam. Atque explicabo magnam delectus exercitationem nostrum molestias explicabo. Velit minus nihil temporibus. Nemo quod asperiores eaque itaque temporibus facere perferendis rerum. Illum nisi eligendi. Repudiandae odit consequuntur tenetur illum. Voluptas asperiores architecto. Esse quibusdam ex sed impedit consequuntur rem id optio. Asperiores odio nihil nulla a. Expedita quasi fugiat alias aliquam repudiandae enim. Ipsum ea illo vero est. Quo explicabo atque neque asperiores nostrum animi sapiente aliquam. Qui dolorum iste ducimus iure. Amet ab id assumenda. Maxime officiis possimus dolor molestiae dolores impedit.

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