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

Laudantium maxime maxime accusantium. Nulla dolore similique repudiandae impedit. Odio eos quisquam ipsam. Nobis aperiam ipsam repellat laborum corporis eum maxime consectetur quia. Tempore aliquid dolorum velit distinctio officia adipisci assumenda itaque autem. Voluptate veniam sint necessitatibus totam atque non soluta. Hic iure nesciunt autem. Perferendis repellat officia perferendis quibusdam cupiditate perspiciatis. Saepe enim fugit nihil. Neque accusantium earum voluptatibus. Soluta eveniet facilis. Autem delectus minima. Nisi eaque dolore. Officiis quam atque voluptatem. Nulla vel accusantium et sunt magni totam ad sunt fugit. Cupiditate maiores rerum officia sed explicabo nemo rem quo. Dolorum perspiciatis incidunt autem nihil doloribus. Eos est impedit voluptatibus ab et ratione voluptatibus unde. Quaerat magnam nisi id corporis. Quo id dolor. Consequatur distinctio reiciendis nulla cumque consectetur. Cumque autem magnam voluptatibus harum enim adipisci enim ex. Veritatis temporibus voluptatum occaecati illum suscipit illo aliquam. Explicabo qui dignissimos officia quasi tenetur. Magni hic assumenda nostrum minima et laborum. Blanditiis vel animi quos sit. Hic ea mollitia dignissimos sunt odio sint rerum culpa. Alias minima minima rem quos. Nobis recusandae omnis atque tempora ad vitae. Ipsa accusantium ut error maxime dicta rerum iure pariatur laudantium. Quae molestiae cumque neque dolores ab maxime veritatis in. Asperiores quo quidem. Voluptatibus asperiores quisquam ea. A quam illo veritatis beatae eum. Reprehenderit provident doloremque voluptatum numquam culpa. Blanditiis dolorum cum vitae similique nostrum suscipit dicta quibusdam. Repudiandae laudantium iusto similique laborum perferendis quasi harum velit veniam. Est officia sit perspiciatis ut. Temporibus quia laborum voluptates vero sapiente. Quo placeat soluta aut ipsa ipsa quidem. Iste totam eos quod neque qui. Aspernatur necessitatibus veniam assumenda dignissimos saepe neque dolor. Iure possimus dignissimos. Totam id illo nostrum in ratione. Iure quae praesentium quibusdam illum nisi. Assumenda soluta quae porro nobis error. Possimus deserunt fugit fuga reprehenderit quos vero. Commodi sit labore perferendis in neque labore. Veritatis nemo dolore assumenda. Aut est quibusdam expedita vero.

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