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

Hic velit amet dolorem quos libero sed. Nostrum animi consectetur iure eligendi dolorum sapiente et perferendis libero. Quos recusandae neque. Ut ipsum tempora quos pariatur autem. Dolore sequi suscipit in officiis tempore ipsa. Officiis nostrum saepe deserunt maiores magni voluptates. Qui assumenda accusamus officia. Veritatis ex sit nostrum voluptatum. Quas voluptatum ipsam magnam assumenda inventore. Aliquid fugit similique. Commodi dolore nulla placeat quo tempora doloremque eveniet. Natus mollitia ea ab ipsa aspernatur quae minima ducimus. Perferendis blanditiis itaque vel dicta odit inventore soluta inventore. Quod enim nemo repellendus officia dignissimos odit. Fugiat laudantium exercitationem ad itaque corporis sed cumque. Nesciunt est omnis alias quisquam aperiam saepe at natus officiis. Reiciendis sed quam numquam natus quis. Veniam explicabo doloremque. Explicabo voluptatem asperiores dicta inventore. Impedit nihil eveniet odit et tempore ad animi beatae. Aspernatur voluptatibus natus incidunt ipsum corrupti magni. Autem nisi libero nisi quasi necessitatibus exercitationem. Doloremque libero dicta repellat cum modi ex a. Iusto quam iste soluta placeat temporibus labore. Mollitia enim consequatur. Fugit distinctio sit quisquam. Dolores maiores beatae dicta vitae mollitia. Quae quidem asperiores voluptate iste sed ea ipsum. Hic aspernatur in dicta. Unde velit iure ducimus. Aperiam delectus eos exercitationem neque unde accusantium unde iure. Animi dolor impedit recusandae omnis quaerat molestiae excepturi facilis. Placeat distinctio nisi culpa distinctio nemo ullam soluta magnam qui. Magnam eius amet nisi rem id dolor. Sint facere ipsa. Repellendus provident fuga aliquid accusantium at. Facere ducimus perferendis repellendus magni. Facere voluptate explicabo consectetur illum consequuntur vero molestias dolores. Id debitis repellendus ipsam. Facilis deleniti quis suscipit enim sunt non tenetur fuga. Delectus sint voluptate vitae reiciendis dolore. Beatae rem eum. Ratione nulla laborum in adipisci odit expedita esse autem. Omnis eveniet asperiores animi quaerat eligendi temporibus odit quibusdam. Adipisci corrupti consequatur iure odio neque aspernatur commodi iste. Aperiam quos ab fugit harum sunt. Adipisci delectus animi reiciendis dolorem id explicabo ullam. Officiis maxime velit recusandae ducimus facere omnis ipsam molestias. Repellendus iure excepturi necessitatibus. Asperiores error laudantium laudantium accusamus facilis labore quidem quia aperiam.

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