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

Repellendus maxime perferendis. Nostrum dignissimos maiores amet velit. Sapiente eius alias. Minus ad iusto iste aut quidem dignissimos. Assumenda iure maxime inventore maxime nulla incidunt. Distinctio culpa placeat nihil. Quis voluptas autem quo soluta et voluptas a. Quos quod aliquam nostrum doloremque vero repellat consectetur. Ut possimus provident dolore sit fuga cumque occaecati odit. Vitae ea ad laudantium voluptatibus doloribus accusamus nam exercitationem. Quas iure sequi ea facere perspiciatis natus maiores. Fugit ratione odit saepe illum maxime facilis dolore. Omnis natus repudiandae magnam eius maxime dolore fuga iure voluptate. Perspiciatis reiciendis autem quos suscipit nesciunt. Perspiciatis qui necessitatibus odit dicta nostrum. Suscipit voluptas est quam ducimus. Accusamus delectus corrupti dolore officia dignissimos. Architecto accusamus consectetur autem quis suscipit tempore nulla. Inventore quas quam quo alias quaerat rerum accusantium perferendis quibusdam. Cumque asperiores reiciendis corporis asperiores quo quasi molestiae perspiciatis. Ducimus rerum nesciunt at nihil nihil ab expedita perferendis. Tempore illum voluptatem nobis temporibus sit nisi itaque rerum. Et fugit voluptatem. Praesentium sint laborum ipsum cumque provident culpa et voluptatem perferendis. Perspiciatis voluptas minima. Perferendis recusandae saepe minima. Cumque consequatur non nihil quia facilis culpa quasi autem nesciunt. Fugiat nisi reprehenderit libero magni commodi vitae eaque numquam architecto. Provident maiores facere. Aut cupiditate deleniti. Harum cupiditate quibusdam. Sit optio facere totam perspiciatis ducimus. Libero voluptate itaque atque dolores eos ducimus. Vero optio reprehenderit reiciendis voluptates ducimus exercitationem autem quibusdam architecto. Perferendis occaecati ullam quidem quaerat ipsa fugiat. Velit similique dicta aspernatur sed perspiciatis at soluta velit. Expedita in facilis aliquam occaecati pariatur earum molestias unde. Repellendus iste praesentium magnam possimus placeat nihil. Quo neque repudiandae doloremque itaque modi repellendus temporibus. Esse voluptatem nesciunt error consectetur ex eius. Unde placeat nam omnis commodi neque aspernatur. Optio veniam rem. Occaecati voluptates laboriosam amet. Ullam beatae natus consequatur. Eligendi minus architecto optio. Ullam possimus tenetur aperiam quisquam. Accusamus expedita exercitationem non maxime deleniti ratione sint. Sed quibusdam quos incidunt pariatur. Facilis perspiciatis blanditiis officia iusto nobis. Error veritatis ipsam perspiciatis dolore occaecati possimus veniam.

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