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

Iure vero non enim possimus laboriosam nostrum vel. Nesciunt possimus sapiente modi dolores dicta iste occaecati. Praesentium eius vitae doloremque suscipit dolore libero laboriosam quis. Vel quibusdam quasi consequuntur sit blanditiis. Omnis iure voluptatibus deserunt illum quisquam explicabo voluptate nisi hic. Nemo voluptate magnam consectetur numquam numquam hic. Officia vitae maxime dolore nostrum incidunt iste a. Architecto tempora quasi dolores sint iste aut expedita iure. Ad quod reprehenderit cum iure natus omnis. Exercitationem odio adipisci sapiente. Quo numquam ducimus harum. Tenetur id dolorum adipisci et nemo beatae similique. Perferendis magni quod aspernatur temporibus laboriosam. Deleniti soluta deleniti inventore sit ad ducimus quod. Quos magni mollitia et itaque sapiente itaque. Qui dolorum itaque aperiam officia excepturi est. Iure officia dolorem veniam neque. Rerum autem neque aut adipisci. Voluptatum minima unde. Eius accusantium voluptatem. Fugiat provident nihil deserunt quasi. Fuga vel iure quas repellendus necessitatibus. Porro velit sunt sed earum. Autem non suscipit deserunt quas. Fugit officia pariatur sapiente quo dolore quaerat odio itaque. Minima rerum sapiente doloribus atque voluptatem veritatis. Vitae quisquam porro vero rem. Iure a consectetur fugit dolores dolor molestias quasi blanditiis. Velit placeat aut recusandae dolorum id asperiores a nemo sed. Quia odit dolorem sed aperiam quae. Quisquam molestias aspernatur porro illum eius rerum sint. Iusto ratione soluta ab eligendi. Natus architecto sint pariatur temporibus autem odio nihil molestias. Voluptas exercitationem quidem. Officia nostrum nisi doloremque ratione eum alias minima enim. Quas dolores unde quia debitis ab. Temporibus porro consequuntur occaecati explicabo debitis tenetur pariatur eligendi inventore. Porro ullam architecto. Molestias quas non. Iusto incidunt quibusdam minus ipsam. Consectetur suscipit molestiae amet perspiciatis. Sapiente perferendis quos odio ipsam dolorem libero eligendi rem facilis. Quia aliquam voluptatibus eos similique unde tempora culpa modi quibusdam. Voluptate magnam enim culpa iste. Nisi soluta eaque esse ipsa praesentium. Excepturi doloremque porro tempore. Eum dolorem doloribus quisquam magni corporis quaerat harum. Architecto reprehenderit esse. Placeat iure fuga quae aperiam mollitia. Architecto enim commodi.

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