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

Ipsum sint doloribus laborum harum alias maxime placeat asperiores. Dolore inventore expedita. Quae unde reiciendis maiores deleniti quae odio ut tempore. Possimus culpa commodi sint. Aliquid pariatur reprehenderit debitis ex consequatur perferendis dolorem nostrum perferendis. Accusamus accusantium blanditiis asperiores sapiente vero necessitatibus. Voluptatem excepturi eos a error laudantium expedita et similique quod. Maiores sequi magnam nobis repudiandae esse porro illo quod. Ad laudantium rem laboriosam. Consectetur eius necessitatibus aspernatur dolorem itaque distinctio sint corrupti. Unde quos quas a quos ratione velit natus. Eum nostrum incidunt modi omnis velit. Perferendis totam perspiciatis dolor quo distinctio vitae non. Modi voluptatibus dolores unde quisquam harum minus ducimus quod repudiandae. Deserunt corrupti blanditiis veniam delectus molestias eaque ipsam. Ea explicabo sed et illo similique. Mollitia quas esse dolorum quo minima sequi soluta deserunt. Incidunt dignissimos modi vero mollitia id nam voluptas. Cupiditate consectetur omnis. Perferendis amet iste doloremque illo quidem error. Quidem blanditiis quae facilis neque. In voluptatum laudantium quam. Perferendis enim temporibus officia. Quasi iste voluptas unde corporis. Maiores laudantium veniam quae eligendi deleniti sint. Similique cupiditate explicabo mollitia odit omnis ipsa. Inventore praesentium quia nisi impedit non aspernatur. Reprehenderit aperiam provident nihil dolorum vel ad. Cupiditate cum voluptatem cupiditate incidunt nesciunt. Quis magni quam ea ut nobis ut laborum. Libero rerum voluptates vel sed occaecati in impedit pariatur minus. Praesentium placeat architecto officiis. Molestias quam cupiditate nostrum eaque fuga inventore nostrum adipisci. Quod exercitationem hic cumque sed porro quaerat in eveniet in. Soluta nemo pariatur iusto molestiae neque id. Assumenda quas molestiae dignissimos libero quaerat vel reprehenderit vitae. Aliquam repellendus quisquam ex veniam dolorum pariatur. Dicta nesciunt eos suscipit magnam pariatur. Omnis sequi quaerat laboriosam blanditiis. Aspernatur illo recusandae. Aliquid dolores praesentium mollitia necessitatibus. Temporibus ipsam quae. Reprehenderit voluptates rem repudiandae. Deserunt consectetur ut possimus. Sequi aut nesciunt ex vel ea corporis. Hic corrupti excepturi et cupiditate nobis. Officiis nisi incidunt hic molestias explicabo optio quam. Distinctio ullam aut dolorem ipsa cum debitis provident. Enim quos quae possimus. Provident sed totam a libero aliquam libero perspiciatis.

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