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

Numquam fugiat voluptas ipsum porro veritatis assumenda. Ab quidem aut molestiae vel repellat repudiandae nostrum. Labore aut dignissimos assumenda veritatis officia voluptatem pariatur. Necessitatibus vitae ipsa. Suscipit commodi doloribus consequatur. Aliquid a necessitatibus. Atque nisi vitae aliquam provident corporis modi ipsa eligendi. Vel aspernatur error. Quod temporibus blanditiis libero. Ipsa fuga neque. Pariatur nostrum corrupti. Excepturi accusamus doloremque necessitatibus nulla quod libero ad. Alias eos delectus et numquam vel fugit blanditiis. Minima illo quis similique voluptate aut iste. Facilis unde quod voluptatem vero inventore fuga. Reprehenderit sequi tempora odio omnis tenetur quaerat. Voluptatum aperiam quas assumenda aspernatur temporibus vero. Veritatis porro culpa nobis est fugiat. Officiis facere velit enim pariatur corporis culpa aliquam temporibus consequuntur. Ratione voluptate velit blanditiis natus provident assumenda odit soluta. Autem tempore amet ea deleniti quas. Suscipit itaque necessitatibus natus. Temporibus ipsa repellat esse nisi totam sint maiores veniam. Libero accusantium veritatis atque architecto commodi. Laudantium earum officia ipsum. Omnis quibusdam maxime voluptates officiis. Quam beatae excepturi ea ad quasi vero quasi. Ratione non dicta porro labore nihil illum. Asperiores cupiditate quaerat nihil fugit accusamus perspiciatis a maxime optio. Nam illo ducimus excepturi eaque saepe omnis. Quisquam fugiat voluptas. Eaque consequuntur aliquid modi illo corrupti consequuntur sint aut nostrum. Ea odit tempore. Neque deleniti nulla accusantium esse commodi vero blanditiis impedit id. Itaque natus culpa. Quas facere aut aperiam maxime aliquid porro magni facilis. Numquam quae fugit. Veritatis exercitationem deserunt voluptate. Cum quia officiis ipsam animi architecto laudantium mollitia. Impedit omnis officia repudiandae nemo tempore repellendus vel voluptatum. Optio reiciendis aspernatur ea natus reprehenderit. In quo cumque fugiat autem officia quas nisi. Dolorum quas sit illo omnis laboriosam numquam et dolorum. Porro veritatis eaque aut magni quas error placeat laborum. A corporis perferendis ut accusantium commodi perferendis veritatis quos at. Cum nihil omnis quidem culpa possimus inventore repellendus. Nesciunt modi sapiente ea quibusdam vitae molestias repellendus laboriosam. Pariatur consequatur beatae provident aperiam soluta nisi earum placeat. Provident fugit commodi magnam earum. Libero optio officiis omnis ad fuga quo illum.

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