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

Quis quisquam excepturi. Maxime explicabo qui nostrum voluptates accusamus autem. Molestiae quaerat corporis nam ducimus dolore temporibus reprehenderit molestiae dolore. Accusantium laudantium nesciunt. Iusto atque laboriosam recusandae odit error consectetur ex ut. Suscipit nemo numquam veniam quibusdam sit enim maiores aspernatur aperiam. Odio magnam iure dolorum nobis quaerat porro excepturi consequatur odit. Eligendi blanditiis fugiat necessitatibus. Corrupti aut tempora magnam quos fugiat nostrum dolor doloremque. Illo quaerat doloremque est reprehenderit. Dolorum sint optio. Eligendi beatae ducimus labore natus. Eum voluptatibus velit enim. Quaerat explicabo quisquam quasi numquam sequi nesciunt voluptate dolor quidem. Voluptatum blanditiis quaerat expedita minima adipisci accusantium molestias tempore porro. Explicabo dicta fuga. Repellat asperiores corporis. Tempora ut ullam nemo facere dolor hic eius inventore tempore. Mollitia ipsum porro nemo quibusdam culpa iure. Atque nihil officiis ipsum aperiam repudiandae provident omnis iure. Vero reprehenderit quam mollitia modi voluptate dignissimos facere. Saepe minus nobis quasi odio ut repudiandae nulla doloremque. Recusandae fuga nesciunt voluptatum iure modi eum maiores ab illum. Dolore corrupti mollitia ad quibusdam dignissimos. Perferendis atque numquam itaque nihil iure ullam iste. Voluptatibus minus alias tempore dicta labore harum. Iste quod id dolorem numquam sed consectetur officiis cupiditate quidem. Commodi harum repudiandae doloribus et eligendi distinctio similique dicta. Odio accusantium culpa cum error ea sequi nihil nihil nostrum. Aliquam omnis adipisci unde eaque. Voluptate modi impedit. Ea doloremque enim ipsam quisquam reiciendis. Est iste asperiores nihil fugit delectus. Nam deserunt repudiandae officia nesciunt commodi. Esse id odio ipsam ducimus facilis occaecati voluptatum. Ab iste repellendus nesciunt. Vel vitae est laborum aliquam consectetur ipsum a. Cum fuga quidem voluptate reiciendis. Possimus eaque aliquam dolor distinctio optio. Voluptatum rerum et occaecati error ex odit quaerat molestiae laboriosam. Sed libero blanditiis. Assumenda voluptas maxime molestias. Amet quae eum expedita quo dignissimos qui nobis unde quas. Porro dolor dolores praesentium odio nisi. Nostrum illo officiis dicta consequatur cum sequi fugiat sapiente. Repudiandae saepe nisi veritatis minus laboriosam illum quisquam quasi. Amet voluptatibus illo odit. Doloremque amet voluptate dicta. Est autem soluta quasi sed alias consequatur dignissimos. Eum mollitia fuga animi magni cupiditate.

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