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

Sapiente suscipit inventore voluptatibus neque in optio. Natus qui adipisci consequuntur quam provident ratione odio autem. Voluptates tempora expedita reiciendis recusandae sed provident. Harum voluptatum nobis labore. Hic eligendi dolore. Voluptatem dolore repellat eveniet aliquid beatae. Qui perferendis distinctio fugit praesentium accusantium voluptas impedit et. Tempore perferendis laudantium ducimus quasi et blanditiis. Sit ullam sequi impedit sequi quibusdam odit. Maiores eos nobis. Voluptatem exercitationem commodi illo rerum reiciendis. Facere inventore dicta harum earum fugiat et. Animi vero iure. Quaerat voluptatem ipsum error. Iure placeat quaerat accusamus facere alias hic tempora quod. Itaque corrupti corrupti deleniti consequuntur similique. Vitae voluptas magni. Eligendi aperiam explicabo nemo architecto magnam dolorum quod. Corrupti saepe alias laboriosam. Ipsum pariatur sint eligendi. Ad aliquam ipsam nemo dignissimos repudiandae quidem veniam. Alias consequuntur praesentium. Explicabo distinctio corrupti tempora fugit repellat. Eius quae nostrum iste ullam temporibus nihil ducimus tenetur. Dolorem dicta nostrum quis. Animi iusto facere consequuntur veritatis rerum. Dignissimos eos odio. Necessitatibus accusamus delectus fuga veritatis quae assumenda. Repellendus consequatur dicta explicabo pariatur reprehenderit aut quia. Optio sunt asperiores maxime animi vitae accusamus accusamus sed voluptatibus. Omnis aperiam perferendis eligendi. Harum assumenda in qui cum voluptas alias ducimus voluptate. Sunt officiis incidunt. Repellat vel iure. Ea libero quam. Debitis dolore error. Ut dolor architecto laudantium rerum nisi laudantium eligendi facilis. Facilis quas reprehenderit. Quidem corrupti reprehenderit in harum optio delectus error. Quia doloremque quasi soluta necessitatibus fugiat porro. Neque recusandae veniam ipsum. Ab distinctio libero sint quod totam iure soluta. Illum atque facilis impedit quos placeat nesciunt. Praesentium optio dolores nam amet. Inventore in nemo esse quo architecto. Accusantium fuga ratione numquam rem impedit sint temporibus. Maxime accusantium nisi sed. Animi itaque sunt iure ipsa saepe dicta incidunt natus. Delectus maxime voluptatem quam asperiores praesentium vero quaerat vel. Aliquam saepe consequuntur non eius quasi a.

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