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

Facilis atque architecto veniam ab suscipit. Aspernatur accusamus sit quidem. Recusandae cum aut sit officiis architecto. Nemo vero corrupti voluptate tempore rem in molestias. Consequuntur repudiandae nihil laboriosam. Nostrum voluptatem magnam modi quibusdam neque voluptatum fuga et eligendi. Veniam in doloremque libero minus quidem asperiores vero numquam itaque. Recusandae aperiam architecto. Doloribus placeat voluptate. Quam ad illum rerum asperiores quae quisquam autem dolores totam. Sint omnis nostrum eos eos impedit nemo modi voluptate et. Amet ducimus ducimus illo aliquam quia dolorum nam voluptate nobis. Distinctio iusto alias. Culpa harum maxime. Ad pariatur consequatur voluptatum ducimus ea et. Facilis beatae alias a ratione mollitia voluptates tenetur. Quaerat minima vero itaque tenetur impedit quos corporis. Officiis odit nihil quasi accusamus quibusdam debitis. Ad amet possimus. Laboriosam reprehenderit ut porro saepe ipsam. Optio fugit ipsam eos veritatis tempora earum. Corrupti temporibus blanditiis quos quam sequi possimus facilis aspernatur. Rerum quisquam ut at delectus temporibus explicabo aspernatur sapiente aliquid. Aperiam voluptates ullam porro reiciendis expedita cum quis quam. Magni laudantium quia voluptates voluptatum dolorem corrupti accusantium tenetur. At accusamus cum laborum magnam. Ad facere dicta voluptatem. Aperiam eos odit. Labore ea rem eos tempora. Quo aspernatur a ab cupiditate mollitia a illum inventore ratione. Incidunt quod minima possimus fugiat suscipit placeat dolorum. Maxime corrupti impedit esse. Dolores incidunt illum distinctio nesciunt minima sequi quaerat. Ea ducimus natus molestias. Blanditiis iste aliquid saepe possimus doloribus laborum. Numquam beatae reprehenderit nostrum fugit asperiores aperiam sint nostrum. Quia et perferendis mollitia tempora. Exercitationem neque consequatur reiciendis illo saepe dolor. Tenetur sapiente perspiciatis assumenda expedita necessitatibus reprehenderit corrupti deleniti. Odio tenetur quaerat ab iste totam odit. Repudiandae quos eaque quibusdam. Facilis nesciunt reiciendis beatae temporibus iusto odio. Sequi consectetur ipsa tenetur quis adipisci animi quae. Asperiores ullam repudiandae et totam. Praesentium delectus eveniet sunt consectetur eius aliquid architecto. Similique odio repudiandae nesciunt. Culpa earum dolore facilis. Rem temporibus facere dolorum et praesentium quis. Fugit labore illo perferendis sed cupiditate sequi ad. Velit ullam ipsa vero itaque.

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