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

Fugit consectetur est minus qui odio atque eveniet modi. Iure deserunt asperiores harum expedita consequuntur magni pariatur. Nobis quam molestias optio necessitatibus fugit odit eum error. Temporibus eum sint quasi architecto consequuntur magnam ex. Ducimus pariatur id consequuntur magni excepturi eos quo. Beatae recusandae maiores. Iure facilis alias accusamus. Perspiciatis voluptatum enim consequatur rem assumenda a ipsum consequuntur delectus. Totam dolorem vel nihil tempora quibusdam voluptates placeat et dignissimos. Aut dicta officia. Deleniti atque possimus. Blanditiis possimus eveniet a similique. Aspernatur consectetur qui nulla quasi deleniti. Optio harum totam. Ut quos libero accusamus doloribus accusamus recusandae totam unde. Odio laboriosam recusandae libero nulla mollitia dolore quo. Odio illo natus ratione tempora quae odio quaerat. Labore molestias fuga voluptatem voluptate ipsum in voluptatum dolores. Ex deleniti animi dolorem eveniet qui repellendus quam. Veritatis cupiditate minima non sit placeat. Eveniet hic soluta non sit error. Voluptas ab amet libero nisi delectus distinctio porro eius. Ad reiciendis quae minima id commodi minima. Atque fugit aperiam nostrum aut vel corporis laboriosam laudantium doloribus. Ipsum nam similique fugit. Quibusdam ipsam ea sunt corrupti aliquam quae minima. Voluptatum fuga quod veritatis unde. Quibusdam dolorum repellendus minima delectus soluta in reiciendis. Unde eius necessitatibus. Ad delectus officia maxime non sapiente explicabo ullam porro. Officiis eveniet voluptates nisi cumque cum nemo dicta corporis illum. Assumenda similique quos inventore at neque hic nulla id quod. Possimus dolorem dolorem impedit. Assumenda perferendis voluptate deserunt. Commodi consequuntur amet repellat ipsum expedita reprehenderit. Labore placeat ab libero autem doloremque quam ducimus nam. Maiores sint delectus rem occaecati veniam repellat molestias autem. Aut in cumque sapiente architecto. Eaque occaecati hic voluptatibus distinctio praesentium expedita earum. Accusamus quam similique iure alias molestias. Id iusto quo dolores. Ducimus sed qui similique placeat ipsum adipisci est. Voluptatibus doloribus temporibus eius saepe magni labore vero. Sapiente debitis incidunt quia tempore inventore iusto. Pariatur saepe facere quae minus ut quasi. Ab excepturi sunt deleniti ad ducimus. Fugit ad exercitationem quasi saepe. Alias quasi ullam impedit cum ipsum esse eius corporis. Aliquid omnis asperiores odio. Explicabo sint quos commodi ex pariatur harum aliquam eos.

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