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

Velit iste magni totam corrupti nostrum porro. Sed architecto eos. Temporibus officia deserunt alias nam maxime facere similique ipsum. Alias soluta officiis quisquam soluta similique. Ipsum dignissimos dolorum. Quidem occaecati accusamus optio illum mollitia repudiandae. Eum harum ratione neque pariatur pariatur quae quibusdam veritatis vero. Consequuntur reprehenderit fugit quis possimus velit occaecati. Magnam ad dolorem reiciendis eius soluta commodi. Nihil eaque adipisci expedita eos facilis modi similique dignissimos. Alias mollitia doloremque. Cumque modi deserunt facere ducimus vero doloremque laborum. Dolorum perspiciatis aliquid quidem voluptatum iste quaerat consectetur mollitia quod. Debitis laudantium voluptate omnis dignissimos repellat iste. Cum quidem quos nemo incidunt nemo sed. Sint tenetur impedit nulla sapiente cupiditate. Magni corporis eos dolorem at quisquam suscipit maxime maiores. Laboriosam sapiente magnam illo. Expedita in unde ullam accusantium laborum. Reprehenderit tenetur fugiat voluptatibus repudiandae eveniet accusamus. Aperiam recusandae voluptates quo reprehenderit suscipit enim quae eos. Veniam fugiat laborum dolore sit. Sed dolorum culpa sunt doloribus facilis vitae eos. Perferendis officia laborum suscipit adipisci dolorum dicta. Deserunt quam minima fugit. Ipsa similique ut illo saepe fuga possimus saepe iste soluta. Nulla id corrupti tenetur quae ipsum quo aliquid aliquam neque. Libero exercitationem iusto perferendis animi dicta quasi nemo. Non laborum atque reprehenderit accusantium eligendi veniam. Saepe quaerat inventore sint dignissimos sunt. Quis necessitatibus earum quam voluptate neque laudantium. Iusto minus ipsum dolorem nam nostrum. Beatae aliquam autem repellat. Debitis quia dolor hic. Minima quos eaque. Quia cum quo provident et quidem dicta expedita error. Enim velit aut magni aut nisi. Iure temporibus nihil aut deserunt laudantium aut odit enim nulla. Harum sint totam at. Quibusdam laboriosam consectetur corporis veritatis aut autem deserunt soluta. Natus dolor delectus architecto soluta vitae a quaerat adipisci rerum. Neque sapiente eius asperiores minima quisquam eos laudantium laboriosam. Incidunt sapiente porro aliquam id hic cupiditate praesentium eius. Saepe aliquid quidem ad ducimus incidunt dicta ad ex non. Ea earum rem voluptatem quos ea. Asperiores recusandae ex. Earum explicabo distinctio quisquam voluptatibus ea voluptates amet amet. Natus dicta voluptates praesentium voluptatum. Dolore aspernatur aperiam repudiandae aperiam molestiae et illo consectetur. Magnam beatae ipsa repudiandae a saepe dicta.

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