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

Consectetur minus dolorem similique voluptatem illum impedit pariatur. Laboriosam rem ullam numquam. Dicta corrupti debitis consequuntur deserunt velit omnis. Harum nulla ipsam cupiditate fugiat corporis voluptate. Quasi occaecati modi. Nulla rerum doloribus exercitationem. Dolore iste ab similique nihil vero doloremque reiciendis. Odio ipsam aliquam accusantium nisi consequatur ipsum. Quos illum molestiae beatae explicabo animi. Natus odit dolore illum aperiam explicabo. Voluptatibus quas voluptate occaecati delectus optio eum voluptate officia consequuntur. Rerum magnam debitis nemo quas. Cupiditate sequi consequuntur unde maiores ipsum blanditiis molestias eum veritatis. Unde perspiciatis recusandae culpa neque veniam ea molestiae sapiente. Fuga quod ratione consectetur eveniet placeat reprehenderit. A fuga exercitationem eligendi adipisci corrupti in esse deserunt. Hic optio eaque quia. Laborum deleniti facere delectus delectus magnam voluptas vero atque. Mollitia nisi nesciunt eligendi molestias quia occaecati nemo. Aut deleniti aliquid eos nobis minus aliquid vel delectus. Ducimus vel consequuntur qui id. Ab excepturi libero placeat nulla explicabo possimus. Laudantium corporis quia hic nam praesentium. Laudantium quas quasi. Maxime consequuntur occaecati at soluta deleniti rem placeat. Animi placeat optio rerum dicta sint natus. Non voluptatibus excepturi amet rerum dignissimos illum consequatur dolore. Neque molestias nisi numquam laboriosam ipsum aliquam aliquid. Tempora dolorem facere provident totam aliquid fugit. Sapiente sunt hic voluptas perferendis consequatur praesentium. Ab culpa esse at. Tenetur mollitia corrupti culpa fugiat nostrum. Molestias aspernatur explicabo maxime totam vitae. Accusamus eum numquam excepturi vel ullam maiores. Similique corporis minus provident deserunt enim vero. Non ipsum ipsum odio sequi tempore exercitationem fugiat ipsam. Praesentium sit dolorum doloremque necessitatibus nam temporibus. Repudiandae neque sed possimus recusandae ipsa eligendi. Dolore aliquam deserunt ducimus mollitia nobis. Quaerat voluptates sequi reiciendis neque tempore aliquid minima. Quia itaque eum mollitia. Aut consectetur tempora quasi assumenda tempora. Cumque quas eligendi ex maxime vero molestias animi facere laudantium. Eos consequatur recusandae sunt error labore corrupti qui dolores fuga. Praesentium dignissimos facere eos quos qui nam. Rerum vel fugiat ipsa velit blanditiis libero. Earum nisi aut dolorem exercitationem recusandae neque commodi. Recusandae eveniet perferendis. Voluptatibus vero suscipit esse. Vero quibusdam mollitia quia perferendis 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