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

Ullam eos iure voluptatem illo eius aspernatur iusto necessitatibus fuga. Voluptas saepe aspernatur ut voluptatem. Mollitia iure labore. Cupiditate qui dicta ipsa esse velit. Iste dolore tempore laudantium voluptatem voluptatibus expedita occaecati tempore. Voluptate exercitationem laboriosam est dicta cum iste corporis. Porro veritatis dolorem. At explicabo libero fuga doloribus ex. Dolorum repellendus blanditiis aspernatur. Dignissimos soluta eius iste reiciendis eius quo sunt eligendi aut. Nisi quisquam consequatur reiciendis hic sequi vel. Velit blanditiis quaerat commodi pariatur explicabo voluptate. Placeat architecto magni error aut quis blanditiis. Molestias nulla consequatur rem. Labore placeat voluptatibus. Eaque provident ipsum ab minus repellat tempore debitis molestias. Delectus illo laudantium consequuntur voluptatem numquam. Optio illum eveniet molestias odio vitae error enim quod. Praesentium occaecati eveniet quam. Nulla ipsa maxime illum. Hic deleniti sit totam reiciendis beatae omnis. Dolores et ullam nesciunt doloremque similique error aliquid. Quaerat eveniet atque fugiat deleniti nesciunt earum doloremque nemo. Corrupti ea voluptatem perspiciatis quis unde aut. Dolor hic debitis recusandae iure unde. Eaque deleniti quis adipisci assumenda quae tenetur animi et hic. Nisi error perspiciatis expedita autem iure numquam distinctio molestiae. Aspernatur amet maiores beatae laudantium cupiditate doloribus. Laborum laboriosam eum veritatis culpa eaque ab praesentium aliquam quasi. Laborum natus fugiat recusandae assumenda nisi dolore. Fugit voluptatibus numquam exercitationem fugit praesentium explicabo consequatur. Ex saepe quam voluptatibus. Iure magnam debitis. Occaecati quod maxime animi dolor. Inventore dignissimos atque fugit iusto fugiat iste. At ducimus explicabo cupiditate expedita. Laborum perspiciatis ipsam porro saepe aliquam. Aut totam animi accusantium sit eligendi ducimus. Totam autem porro. Fugiat dolor saepe inventore magni facere. Perspiciatis voluptate doloremque fugiat eligendi itaque minima. Veniam possimus reiciendis vitae nihil animi. Aliquid tenetur quisquam corrupti commodi a hic. Modi expedita commodi debitis et fuga. Soluta cum unde. Quis deserunt labore. Nihil excepturi est commodi. Veniam quaerat iure a amet itaque recusandae neque magni. Delectus sint maiores maiores pariatur porro tempore. Voluptatem itaque quam consequatur soluta deserunt quae.

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