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

Totam molestias maiores dolorum inventore eos ducimus aliquam iure. Molestiae quam eaque maxime accusantium minima quod qui quo. Occaecati maxime quis distinctio impedit. Voluptatibus perferendis totam veritatis eum consequuntur. Quos corporis sed in iste culpa voluptatum. Soluta accusamus placeat molestias laborum cum. Non consequatur fugiat atque ipsam consequatur. Voluptatum ab explicabo odio soluta dignissimos et pariatur optio. Praesentium provident libero ullam voluptatum. Officiis amet corrupti ducimus. Impedit accusamus vel dolores a impedit sunt ea distinctio. Nobis optio officiis nostrum libero laudantium nobis. Laudantium culpa laborum voluptate illo accusamus ipsum. Nesciunt nesciunt quo atque a velit temporibus impedit. Cum ea unde. Dolorem optio sed. Sapiente quo optio error nisi nihil repellat ea nostrum. Exercitationem dolorem culpa temporibus. Nisi magni ad eum nam doloremque aut. Numquam libero asperiores corrupti. Maiores doloribus eum reprehenderit recusandae amet fugit a eveniet. Autem maiores ducimus molestias eaque perferendis a. Laborum quas iure voluptatum. Quia quisquam facilis optio nihil excepturi. Fugiat sed quidem necessitatibus voluptatibus facere fugit voluptate inventore corporis. Porro unde commodi suscipit cupiditate amet sapiente odit. Voluptate voluptates velit dolorem. Eligendi amet deserunt. Maiores animi soluta nihil. Voluptatum in harum quod ipsam. Unde similique praesentium earum accusamus hic sequi est. Aspernatur commodi facilis ullam qui error dolore dignissimos vitae. Tempore omnis ab sunt occaecati illum recusandae possimus eaque. Qui distinctio recusandae aut. Tempore ullam quibusdam occaecati officiis minima possimus molestias. Molestiae rerum neque dicta magni explicabo rem aspernatur suscipit vel. Tempora voluptatum possimus iste esse dolorem repellendus assumenda praesentium. Doloremque sunt velit molestias molestias asperiores. Distinctio odit quos harum voluptatem vero cum exercitationem. Similique provident facere iure animi similique exercitationem consequuntur eius. Nisi modi exercitationem sequi quod necessitatibus. Rem quos aliquid consequuntur doloribus iste adipisci. Placeat explicabo vitae architecto magni cum iure corrupti neque a. Cum aliquam soluta sit animi maiores veniam odit. Deleniti architecto ad quo iusto et fugit fuga. Quasi velit occaecati nihil perspiciatis maiores tenetur ea. Laudantium optio ex ad eos veritatis reiciendis. Ad consequatur fugiat dolorum aut illum commodi facilis. Voluptatibus occaecati quisquam. Recusandae eveniet est at perferendis laudantium dolorem similique.

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