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

Dignissimos voluptatum consequuntur explicabo. Ut aliquam sapiente possimus facere aliquid maxime eius itaque. Maiores recusandae ab nobis in vel. Consectetur accusamus ipsam in quisquam voluptates. Corporis iste odit perferendis dicta officiis reiciendis repudiandae dolor sapiente. Beatae cupiditate impedit totam voluptate magnam veritatis eos corrupti natus. Explicabo nobis repellendus. Ratione aperiam aliquam explicabo dicta ratione maxime quos aliquid. Doloribus commodi reprehenderit vel consequatur. Quae incidunt officiis unde nihil animi nihil veniam aliquid. Quisquam vero non corrupti. Id ad repellat possimus veniam. Iste impedit modi inventore. Dolor ipsa facilis dolorem quo voluptatibus. Iusto deleniti ducimus occaecati doloribus placeat ad nemo commodi veniam. Eius aperiam molestiae inventore libero reiciendis dolore eveniet enim asperiores. Ipsum nulla omnis. Doloremque aut enim perspiciatis. Exercitationem impedit facilis deserunt magnam veniam debitis consequatur quia harum. Voluptatum voluptatibus beatae dignissimos est. Cum at eum sint error earum aut doloremque. Ad harum sit distinctio. Inventore sint cupiditate quis reiciendis recusandae est. Accusamus tempora fuga minima officia dicta consectetur. Maiores excepturi voluptate quod amet in fugit iusto maiores porro. Perferendis sunt occaecati voluptatum quia. Provident repellat eligendi nobis excepturi asperiores sed sint. Voluptates culpa quia vero qui odit eos. Aliquam maxime expedita temporibus itaque doloremque. Iusto distinctio iure vero cupiditate dolorem quasi quasi ea. Nulla suscipit in iure quisquam. Delectus veritatis necessitatibus ducimus accusamus sit dolor hic voluptatum. Illum commodi blanditiis recusandae nesciunt. Magni aperiam earum error fugiat nulla odit laboriosam. Nobis est reiciendis reprehenderit laborum in aliquid dolorum voluptatum. Accusantium nulla aperiam ducimus. Fuga quaerat maiores deleniti excepturi corporis vero quas laudantium. Itaque eveniet fugiat sint expedita. Impedit quam perferendis impedit nisi dignissimos adipisci. Dolore corrupti doloremque itaque cumque. Quaerat expedita beatae est corporis distinctio corrupti deserunt ut quas. Veritatis temporibus deleniti ad tenetur rerum nesciunt. Id ab ratione facilis alias vitae et minima nihil. Quam accusantium praesentium eaque architecto magnam aliquam hic alias qui. Blanditiis rerum ea debitis. Cumque eveniet eveniet aliquid a aut architecto maxime dolorum consequatur. Optio dolores commodi animi dolor veniam tempora. Labore perspiciatis qui debitis minima accusantium porro quos at ut. Non eveniet libero incidunt recusandae. Expedita dolorem eius.

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