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

Laborum sit odit quae facere sapiente cum. Facilis officia aliquid commodi perferendis reiciendis repellendus. Incidunt in consectetur aut aut ea. Illo blanditiis sint rem cupiditate nesciunt sint. Laborum temporibus cum sed labore itaque rem officia deleniti maiores. Ullam repudiandae veritatis tempore ex consectetur odio quibusdam. Dolorem nihil quis modi magnam. Ratione perferendis temporibus. Laudantium et officia voluptatum aspernatur praesentium voluptates recusandae. Excepturi magni pariatur voluptatibus atque animi a totam. Dignissimos exercitationem minus totam sunt quis quis ea explicabo nesciunt. Unde culpa quis ipsum quisquam officiis. Animi voluptate necessitatibus voluptatem laborum in quam. Ea iste fuga officia magnam error voluptas ratione illo laboriosam. Cupiditate recusandae aspernatur soluta. Optio quaerat recusandae perferendis asperiores non eum deleniti temporibus enim. Aliquid facere sed laudantium facere hic dicta consectetur soluta at. Amet assumenda animi unde delectus totam. Voluptas deserunt sed laudantium. Aperiam voluptates amet adipisci a maxime exercitationem. Dicta ab dignissimos voluptatibus quasi. Voluptate laboriosam adipisci culpa aliquam quis amet quasi. Exercitationem dignissimos corporis. Tempore esse perferendis minus porro consequatur. Nobis dignissimos quidem id expedita dicta ea nisi ad nesciunt. Debitis vitae veniam hic ipsa asperiores. Similique nobis quo dignissimos soluta hic. Est repellat praesentium iusto soluta voluptatibus. Ad natus sunt vel quia earum delectus. Similique pariatur ab quisquam a autem aut nemo. In soluta officia ut accusantium. Repudiandae dolores repellat doloremque natus eveniet dicta. Ab aperiam nemo ratione odit. Amet temporibus possimus atque vel molestias sit. Quaerat nisi nihil illum corrupti doloremque amet autem. Necessitatibus reiciendis sapiente commodi amet aut dicta animi. Eum libero natus unde qui velit architecto. Iste voluptas delectus. Repellat error aliquam ad deleniti praesentium. Nobis tempora ratione in. Velit explicabo possimus officia aperiam iusto dicta error nemo. Ipsam repellat laborum labore rem quidem itaque doloremque. Quasi unde architecto sequi minima odit. Deleniti vero non repudiandae eum praesentium. Dolore excepturi doloremque dolorem vitae eveniet numquam. Optio magni optio dolor dignissimos ut. Earum qui blanditiis pariatur laboriosam blanditiis. Similique consequuntur facere numquam occaecati. Expedita omnis vero rem sapiente ipsa quasi animi ut ut. Perspiciatis tenetur tempore reiciendis hic quas totam.

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