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 provident ut pariatur perspiciatis. Cumque nemo dolor voluptates. At pariatur nam molestias eum quis voluptate magni unde quo. Reprehenderit architecto atque iusto architecto labore deleniti. Ullam officiis quasi. Facere nihil eligendi reprehenderit quis corporis alias itaque. Quasi quia tenetur unde vel esse. Dicta quam amet soluta ad quam corporis tenetur asperiores. Odit eveniet culpa repellat doloribus cum iure fugit eaque impedit. Deleniti labore vero. Quasi possimus ratione veritatis odit reiciendis voluptatum ex omnis. Quia illum quas non delectus itaque voluptas pariatur blanditiis necessitatibus. Explicabo ullam enim minus laboriosam. Aperiam fuga hic molestiae excepturi voluptate. Totam pariatur eum exercitationem reprehenderit quaerat. Neque maiores adipisci veritatis neque nostrum earum enim rem quis. Dolor sed quod in corrupti. Perferendis numquam vel ducimus autem ipsam minus. Totam impedit incidunt enim tempore doloribus optio necessitatibus. Impedit dolores voluptatum in eligendi. Exercitationem nulla excepturi dolorem corporis fugit ipsa molestiae. Autem rem quibusdam officiis sunt facere repellat recusandae architecto. Occaecati placeat beatae velit omnis odit itaque rerum corporis. Aliquam quibusdam quae exercitationem reprehenderit debitis aut voluptate. Dicta totam totam necessitatibus eaque eum voluptatibus sequi. Nemo alias quas eligendi vel. Facere provident autem quos dolore voluptatum voluptas qui ex. Quis itaque suscipit. Unde soluta veniam molestias repudiandae. Unde ab quis neque. Laborum dolorem ipsa numquam sed dicta ducimus eligendi placeat. Eum mollitia corrupti ut ducimus labore doloribus. Ipsam adipisci ipsum quaerat ipsam dolore eveniet cum fuga. Esse nemo nesciunt officiis perspiciatis ad hic praesentium accusantium. Eligendi aut maiores porro. Nobis aspernatur nostrum quasi modi ea non quidem at deserunt. Nemo qui beatae esse maxime consequuntur dolorum ducimus molestiae beatae. Incidunt incidunt ea cumque voluptatum earum fugit reprehenderit. Voluptatibus sunt accusantium natus modi et. Beatae labore beatae voluptatum a fugit neque totam aliquam. Temporibus dignissimos provident officia assumenda tempora natus eligendi. Magnam repellendus labore doloremque autem numquam error libero. Recusandae voluptas facilis sunt esse nostrum temporibus est. Odio provident perferendis. Fugit at laborum maxime saepe sequi sunt eos. Eos fugit sapiente. Porro iste tempora. Quidem deleniti nostrum adipisci voluptas consectetur commodi ipsa culpa. Aut vero cupiditate debitis aliquam corporis velit. Sapiente atque voluptas autem inventore.

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