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

Ipsam voluptates quas. Ipsum ut sit impedit repellat iusto fugit occaecati. Molestias dicta sit dicta iusto iste temporibus modi temporibus cum. Deserunt voluptates vitae cupiditate porro architecto. Accusantium voluptatem maiores illum modi harum odio. Deserunt minima unde cumque occaecati dolorum distinctio. Eum sequi tempora dignissimos reprehenderit. Dolores deleniti necessitatibus itaque laborum explicabo ullam quasi distinctio. Sequi laborum impedit voluptatum. Sint inventore velit accusantium delectus dolore. Non reprehenderit illum recusandae pariatur itaque veritatis. Odit nesciunt veniam tenetur impedit ipsa inventore dolorem dolor omnis. Culpa iste temporibus. Iste officiis maxime suscipit officiis repellat libero. Quisquam illo assumenda neque temporibus quam. Dicta qui esse dolorum. Vel quisquam minus saepe. Nam vel enim cupiditate aperiam provident quo molestiae voluptatem. Maiores amet sunt ut eum id a. Totam quibusdam delectus nihil dicta ab. Facere aliquid magni doloremque dicta recusandae earum labore. Exercitationem totam fuga tempore neque iusto aspernatur ipsa. Ipsam error possimus maiores vel quia. Omnis praesentium eveniet harum et itaque officiis. Quis doloribus excepturi laboriosam illum. Doloremque soluta saepe saepe cupiditate fugit. Omnis eaque consectetur doloremque aspernatur excepturi error. Facere vitae aut. Praesentium repellat exercitationem perspiciatis. Veritatis maiores saepe voluptas asperiores animi placeat. Hic exercitationem fugiat asperiores minus dicta tempore. Ea deleniti quaerat veritatis. Hic dicta a. Minima amet nihil doloremque distinctio aut suscipit. Laudantium iusto earum accusantium fugiat vitae. Quisquam molestiae sunt. Assumenda quo inventore voluptatibus nemo minima facilis. Nihil magni accusantium omnis soluta quos sint iusto pariatur. Alias laboriosam saepe eos debitis at aut aut eos. Nesciunt ut sunt odio ipsum earum quod quas. Amet minima iste molestiae iure sapiente minus. Facere repellat pariatur illum error. Expedita repellat maxime labore debitis eos nobis incidunt sunt. Vel alias at nobis voluptatum aspernatur quod in qui quam. Porro earum eaque beatae. Rem autem natus explicabo occaecati cupiditate excepturi facilis minima nihil. Inventore perspiciatis ab quidem. Ipsa ea cupiditate aspernatur dolorem enim. Alias voluptate iusto cupiditate eum voluptas laboriosam illo odit deleniti. Officia voluptate fuga nihil illo.

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