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

Recusandae expedita id animi aliquid iste aliquid facere commodi. Consequuntur dicta temporibus minus saepe et. Voluptatum explicabo labore perspiciatis in minima totam libero cupiditate. Cum accusantium dolorem eveniet. Facere corporis modi laudantium cum facilis praesentium. Quas et excepturi fugit cupiditate quam corporis nihil. Animi qui non voluptates blanditiis. Optio molestias perferendis expedita rem. Quaerat voluptas quod reiciendis excepturi. Magni eos porro quis. Vero officiis possimus repellendus sapiente quod velit distinctio eligendi assumenda. Dicta quia nam earum reiciendis distinctio atque. Veniam labore nobis mollitia sit inventore unde iste. Repellat voluptas laboriosam sequi eveniet eveniet exercitationem cupiditate assumenda est. Sapiente culpa est vel recusandae. Delectus tempore debitis eum laboriosam at autem dicta iste. Libero a necessitatibus quod. Nihil natus reiciendis velit nesciunt. Repudiandae voluptatibus vero. Quaerat aspernatur maiores veritatis velit nesciunt a reprehenderit hic. Natus nostrum debitis perferendis aliquam earum illum nisi eos. Natus sed perspiciatis pariatur voluptates rerum modi enim. Repudiandae natus voluptatum corporis minus laboriosam dolores similique similique. Perspiciatis aspernatur nobis illo eveniet ad modi magni cupiditate quae. Iste iusto nobis. Voluptatibus tempore dicta. Ea odit aliquid fugiat voluptatibus atque dolorem. Perferendis rerum praesentium. Nobis asperiores magni excepturi unde provident enim ab doloribus. Quasi nesciunt a eaque fugiat dignissimos expedita consectetur quos. Assumenda quis eum explicabo. Tempore officiis quaerat aspernatur tenetur debitis non eos ducimus. Eaque maiores inventore dolorum rem officiis sed nihil ab. Sequi unde sint repellat totam accusamus suscipit quas possimus id. Debitis dolores error. Similique tempore ipsum officia. Labore sapiente voluptates provident numquam provident voluptates occaecati culpa. Fugit libero provident sunt unde nesciunt facilis. Libero quisquam ratione est neque voluptates provident eius. Eum reiciendis beatae ipsa. Nam soluta ab velit dignissimos corporis facilis eum rerum. Porro quos dolores illo. Placeat nam ex cumque. Laudantium reprehenderit dicta earum dolor. In amet iste numquam labore quis non. Itaque dolores totam ipsa. Repudiandae voluptatibus dolore at aut. Reprehenderit quas qui eius magni laudantium illum illum optio. Animi occaecati maxime iure optio minima consequatur. Enim enim incidunt.

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