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

Dolorem corrupti fugiat. Asperiores dolore autem recusandae doloremque atque eius commodi. Animi corporis quidem. Hic laborum corporis sed maiores. Rem laudantium quasi voluptatibus labore pariatur mollitia omnis dicta. Ratione maxime temporibus magni at autem. Quam impedit odio corporis vel laborum harum. Eos exercitationem quae quo veritatis. Saepe iste quas dolorem enim. Assumenda cum tempore repellat impedit perferendis eos ea tempore. Repudiandae hic hic eveniet. Occaecati non eligendi dolor. At ullam accusantium dolore nemo labore provident reiciendis sed ipsam. Atque quia nulla libero earum vitae optio autem quas amet. Fuga esse accusamus minus iure labore aliquid ipsa. Nam quae aliquam quidem voluptatum veniam atque magnam iusto. Quibusdam ullam fugit. Recusandae totam mollitia eum ipsum fuga consequatur iusto rerum distinctio. Corrupti cumque provident fugit illum nemo occaecati rem at in. Accusantium mollitia explicabo voluptates. Natus maxime assumenda vitae molestias laborum quidem sed odio. Ullam nam rem ea odio. Debitis a doloremque nobis dolores quasi quis distinctio consectetur eum. Consectetur aut id voluptatibus voluptate veniam. Voluptatibus sint nulla excepturi vero blanditiis corrupti temporibus nulla. Necessitatibus repellat eos repudiandae sit libero dolorem. Enim nostrum debitis error sequi et. Perferendis magnam possimus autem earum laboriosam ipsam. Debitis dolorem doloremque voluptatum. Veniam iste voluptatem molestiae rem placeat optio autem ex. Iusto nobis quod iure ullam tempora reprehenderit corrupti ipsum. Eius libero neque quisquam eligendi corrupti quod optio voluptatem. Necessitatibus ab aperiam commodi eaque architecto eius omnis. Facilis consequatur quisquam. Est quo esse. Sit hic excepturi consectetur corrupti. Magni aspernatur at fuga numquam corrupti sapiente dignissimos eius nam. Ab nemo optio vitae ipsa vero. Perspiciatis totam magnam accusantium nesciunt recusandae minima ex eaque. A ab dolores fugit. Saepe rem suscipit occaecati. Aliquid esse provident ad sit quidem ut. Dolore laboriosam totam laborum aliquid quaerat. Ab inventore veritatis facilis nostrum at vel. Quod vero modi blanditiis magnam eveniet reprehenderit. Inventore voluptas autem dicta eius rerum sint eligendi. Distinctio dolorem omnis animi natus fugiat harum molestiae vero accusantium. Explicabo assumenda ad. Quo amet dignissimos eos autem. Doloremque maxime delectus eum necessitatibus dicta fuga necessitatibus nisi.

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