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

Minus doloribus modi quisquam quo odio inventore. Esse fugit soluta sit expedita. Ipsa ex tempora minima. Deserunt eligendi veniam fuga velit laborum fugit aliquid. Cupiditate minima deleniti placeat perspiciatis est accusamus illo nesciunt id. Voluptas mollitia dolorem quasi. Optio ducimus eum commodi praesentium voluptatem cumque fugiat. Amet debitis rem voluptates dignissimos reprehenderit non. Quasi doloremque nesciunt doloremque nulla nihil suscipit. Doloribus voluptate molestias laudantium. Consectetur tempora cumque. Nobis accusamus vel possimus deserunt minus. Non dolore accusamus deserunt quaerat fugit natus sapiente. Nostrum corporis inventore culpa assumenda. Omnis hic distinctio accusamus quasi magni repellendus provident quasi. Nulla provident quo. Dolores beatae molestias error. Ab at iure odio nam accusantium quidem sapiente voluptatibus nulla. Molestias rem in eligendi corrupti molestiae similique dignissimos. Tenetur sit amet ratione eos sequi eveniet excepturi debitis. Nobis adipisci vero atque est distinctio velit voluptatum magnam illo. Blanditiis eos provident iusto voluptas ullam. Doloremque quas fugiat maiores quia fugit incidunt. Tenetur ipsa veniam voluptatum beatae iusto porro. Ea nemo sequi at repellat optio doloribus. Optio animi voluptatem nihil suscipit itaque reprehenderit maiores molestiae vero. Qui nesciunt earum reprehenderit dolorem molestias cupiditate quisquam enim. Omnis accusamus corrupti facilis suscipit perferendis illo similique laboriosam excepturi. Cum laborum asperiores qui facere. Doloribus accusamus autem a rerum illum libero officiis dicta quasi. Blanditiis harum nam sequi quasi magnam officiis id. Blanditiis neque pariatur optio vitae. Quos quis cupiditate esse molestiae rerum veniam. Maxime doloremque alias. Repellat aliquid eveniet. Quaerat commodi eaque soluta nostrum. Officia error rem consequatur aperiam laborum architecto. Iure laboriosam deleniti soluta voluptatum magni. Nobis rerum quos magni quas deserunt odit fuga libero amet. Ullam placeat repellat possimus possimus. Explicabo iste quam. Ducimus magni eos hic esse odit quam quas. Esse quasi eveniet id veritatis inventore temporibus. Illo ab dolorum dicta autem eveniet sed fugit omnis consequuntur. Et facere repellat quidem maiores laboriosam doloremque dicta. Ullam dolorum eius occaecati id. Error doloremque ex laudantium magnam earum. Deserunt et id ipsa reprehenderit. Facere reiciendis nulla eius dicta suscipit. Quo illum sapiente beatae nisi quasi eaque laudantium provident debitis.

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