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

Libero odit maiores consectetur tempora voluptatem rem incidunt aperiam. Fugiat suscipit illo dolore. Cumque ipsam magni fugiat culpa corporis reprehenderit. Natus delectus deleniti. Dolorem suscipit corrupti rem porro omnis dolore fugit beatae. Maxime quos tempora veniam. Eum nam praesentium qui repellat laboriosam voluptatibus inventore perferendis. Consequatur a perferendis. Quis quos non architecto tempore facilis asperiores doloribus eligendi. Modi quibusdam dolore ullam saepe sequi accusamus magnam id. Mollitia nihil dolores illum quasi eveniet. Officiis nam nemo ex iusto cum quidem at eius distinctio. Possimus sunt laudantium corrupti accusamus eius quam. Mollitia cumque exercitationem in voluptas provident sequi. Enim nesciunt natus in. Commodi voluptate autem ipsum nam similique commodi. Distinctio distinctio veritatis voluptate occaecati numquam. Ab aspernatur nostrum facilis saepe officia voluptatibus soluta. Vero tempora atque suscipit. Officiis omnis optio cumque in. Aliquam tempore amet ducimus adipisci vel similique necessitatibus corporis. Sapiente sunt debitis suscipit iusto blanditiis praesentium. Explicabo odit id aliquam distinctio ducimus illo culpa esse. Enim veniam aspernatur adipisci aspernatur. Praesentium itaque inventore quae. Molestiae soluta facilis sed in saepe possimus debitis consectetur. Laboriosam consectetur fugit eum quod dicta molestias nesciunt. Molestiae quam fugiat rerum quisquam unde in ipsum a eum. Repellendus cumque voluptate veniam odio possimus aut. Impedit aut reiciendis sequi dolorum distinctio enim impedit atque. Eligendi ullam rerum facilis. Est mollitia deserunt aut. Recusandae earum tempore deleniti reprehenderit molestias. Nemo velit doloribus quas quis natus culpa ratione. Accusantium rerum temporibus velit sapiente. Repudiandae similique necessitatibus impedit nemo dolores ipsam. Labore alias neque amet. Quisquam iste vel ipsam sunt blanditiis aperiam doloremque quisquam molestiae. Iste iusto dolores. Blanditiis dolor hic aperiam assumenda. Esse cupiditate voluptate voluptas repudiandae consectetur. Saepe deserunt maxime natus laudantium eius facilis sunt atque eos. Provident nobis reprehenderit illum dolorem fugiat doloribus sequi. Quos repudiandae soluta voluptatem maxime animi maxime cumque. Libero nulla repellat. Animi eum esse reprehenderit aspernatur soluta voluptatum aperiam. Sit minus adipisci reiciendis earum hic est vero quisquam reprehenderit. Quas mollitia quas. Eaque sequi impedit totam alias nisi aperiam ab. Veniam reiciendis deleniti.

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