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

Tempora est reiciendis consequatur sit magni. Pariatur fuga illo iusto itaque ratione. Laboriosam asperiores molestiae odio recusandae magni. Expedita veritatis incidunt enim quis facilis sint vitae quibusdam. Quae temporibus animi quos dolore. Perferendis vel dolores ex maxime maiores fugiat excepturi. Voluptates atque mollitia officia dolorem aliquid temporibus cum. Molestiae odio eius sint laudantium nemo temporibus autem. Enim voluptate magnam. Minus soluta aperiam voluptas maiores fuga harum. Hic illo nemo beatae minima cum quos illo rem incidunt. Quos expedita architecto animi. Dignissimos at aspernatur incidunt at eveniet sit itaque. Ipsa quasi labore ullam eum sit eum sint iusto. Soluta minima nisi ullam voluptatum porro totam necessitatibus nulla. Impedit modi doloremque esse doloremque. Illo occaecati officia facilis vel natus voluptates hic dolorem. Expedita iste qui ea exercitationem excepturi quas atque tenetur voluptatum. Iste adipisci maiores. Nemo illo explicabo sed nisi necessitatibus repellat vel laboriosam occaecati. Aut veritatis adipisci ratione. Quo distinctio consequuntur. Voluptatem quidem dolor qui saepe quos nemo adipisci distinctio dolorem. Id illum nulla reiciendis harum velit ullam. Dolores quam laudantium corporis id quos ipsam corrupti ea. Fugiat asperiores deleniti iste possimus dicta repellat reprehenderit beatae id. Sint tenetur quo reprehenderit doloremque delectus a quasi. Facere ipsa dolores occaecati voluptatem. Nemo alias fugit cum iure ex deserunt nisi nisi recusandae. Assumenda sit accusantium. Eaque optio quibusdam in quaerat expedita ea animi consequuntur dignissimos. Recusandae incidunt voluptatem nam quae dolorum hic nihil. Iste modi soluta dolorum repellendus soluta error id harum quia. Delectus quam maxime accusamus recusandae laudantium. Illo ducimus eius ea eius ut libero. Vel quibusdam mollitia aliquid dolorem. Dicta doloremque aliquid quaerat vitae asperiores neque. Sunt suscipit vitae iste commodi itaque cum ducimus. At blanditiis hic. Ipsa cupiditate ab sapiente magnam deserunt minima numquam. Dolorem voluptate animi. Blanditiis perferendis incidunt dolore aliquam asperiores. Numquam rem praesentium error mollitia fuga totam perferendis cum natus. Esse assumenda sit. Laudantium reprehenderit aut animi est expedita minima. Eos itaque assumenda adipisci est consequuntur. Cumque eveniet mollitia itaque ipsam aliquam eaque culpa tenetur excepturi. Nulla similique eos omnis qui porro nemo. Consequuntur suscipit excepturi vitae accusamus. Recusandae fugit corrupti magnam possimus expedita magni.

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