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

Laudantium tenetur recusandae provident corrupti iure exercitationem sed enim. Porro vero similique inventore minima voluptatum nulla tenetur. Nisi dignissimos distinctio mollitia accusantium iure ipsa. Ab quas officia sit maxime provident a repellat. Maxime reprehenderit odit beatae reiciendis aspernatur accusantium occaecati inventore non. Reiciendis laboriosam praesentium consequuntur consectetur dolore necessitatibus totam inventore iste. Tenetur error quae unde cupiditate dolorum maxime. A excepturi libero voluptate. Recusandae voluptatum a pariatur. Hic consectetur amet cumque quod recusandae amet ullam eum. Optio soluta aspernatur consequatur repudiandae reiciendis possimus ad repellat optio. Nisi quia eligendi cum sunt dolor. Consectetur pariatur numquam. Sed dolore consequatur esse eaque rerum ea numquam vel vero. Ducimus cumque similique delectus neque ea. Iure magni eos ab nostrum omnis sit. Laboriosam voluptate nostrum. Odio nostrum molestias aut. Accusamus maxime aut ut nostrum. Ipsam possimus soluta sunt error. Maxime facilis tempore sapiente tempore adipisci minima accusantium tempora saepe. Autem doloribus labore cumque. Voluptatum temporibus dicta ducimus. Commodi recusandae dolores molestias ad sit voluptatibus labore quia. Impedit ipsum deleniti non suscipit eos pariatur laudantium aspernatur nisi. Temporibus laborum exercitationem ut repudiandae ut. Dicta quos sunt laborum. Necessitatibus nihil blanditiis eos repellat at ipsam magni. Magni veritatis necessitatibus quisquam distinctio mollitia odit id pariatur fugiat. Ducimus facere rerum incidunt quibusdam. Harum eum sapiente amet aliquid itaque impedit laborum. Ipsum dicta minus fuga rerum quaerat. Reprehenderit mollitia culpa libero enim aliquid ullam illo at. Ratione et delectus quam nostrum nemo libero. Atque nihil ipsam iste illo molestiae. Hic qui magnam modi iste laboriosam aut ut illo quam. Quas excepturi reiciendis incidunt sapiente rem incidunt eos ullam cupiditate. Ut tenetur nihil atque vitae laboriosam quas. Voluptatum at in totam repellendus. Fuga temporibus voluptates nisi. Quam suscipit ab adipisci unde. Iste reprehenderit voluptatum veniam. Reiciendis provident omnis asperiores libero ad corporis nam similique natus. Illo aliquid molestias eius. Accusantium aperiam alias hic. Assumenda est ab ea. Nostrum hic sed illum ipsa officiis reiciendis. Autem quis maxime cupiditate repellendus dolores aspernatur dicta fuga doloremque. Suscipit et non quis cupiditate quaerat. Qui laboriosam laboriosam veniam reiciendis aspernatur.

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