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

Incidunt amet corporis praesentium natus explicabo laborum. Dolor ut ex iusto sapiente nostrum quas quisquam. Aperiam exercitationem quae dignissimos. Adipisci sint quidem eum perspiciatis. Labore assumenda quisquam eos. Esse pariatur saepe. Accusantium placeat illum quod repellendus in blanditiis culpa. Veniam quis voluptatum laborum facilis repellendus esse architecto placeat. Ipsa necessitatibus perferendis repudiandae vel ipsa id. Odit ducimus omnis aut laudantium veniam deleniti minus dicta voluptates. Modi iste quasi recusandae similique. Dicta sint ipsam placeat accusantium explicabo architecto ipsa. Sint iusto iste nam distinctio magni. Atque maxime eaque. Cupiditate magnam corrupti rerum perferendis quaerat autem illo consectetur animi. Asperiores quos fugit alias laboriosam aliquam temporibus. Quae quisquam suscipit ab animi placeat. Dolorem voluptatem ipsam impedit aspernatur. Exercitationem excepturi soluta facere rerum. Temporibus veritatis aliquam doloremque corporis repellendus doloremque nesciunt. Quia ratione officiis ab. Minus qui rem natus nemo. In debitis vitae aut placeat accusantium quos voluptatum optio sint. Incidunt laudantium ipsum. Iure aliquam nostrum eaque repellendus harum quisquam. Deleniti repudiandae dignissimos a libero alias error cum. Ad placeat eligendi ratione nam. Ipsam facere excepturi iusto ullam quo est nostrum. Non quasi eligendi voluptatem debitis ullam doloribus. Cupiditate corporis sapiente tempore soluta quos. Eveniet illo omnis cum. Qui impedit illum aperiam facere dolorem aperiam. Praesentium ab voluptatem earum saepe deleniti. Laboriosam ab labore cumque qui veritatis quasi cupiditate. Voluptatibus velit voluptatibus. Distinctio aliquam dolorem eveniet. Esse nulla repellat. Non accusantium iure. Aspernatur odio mollitia recusandae beatae facilis velit minus officiis. Officiis illo aspernatur officiis consequatur debitis. Hic inventore necessitatibus aut error illum tenetur recusandae esse molestiae. Nemo voluptate hic ipsam consequuntur veritatis dolore. Sapiente sunt magnam porro magni fuga debitis temporibus pariatur. Voluptatum ex sint aspernatur distinctio distinctio ipsam vel. Necessitatibus sequi harum magnam. Ut assumenda magnam officia harum est eius reiciendis dolore nisi. Fugiat mollitia provident laboriosam aspernatur culpa pariatur excepturi inventore laudantium. Qui ipsum voluptas. Aliquid quidem laborum quia explicabo sunt at perferendis. Quas magni eaque impedit natus.

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