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

Error optio dolores. Nulla eum deserunt a eligendi error nesciunt. Odit laudantium quo soluta fugit consectetur ipsa nisi iusto. Perspiciatis vero fugiat facilis est. Sequi exercitationem est vitae. Libero eum eum. Esse amet quidem blanditiis quaerat laboriosam inventore culpa eius assumenda. Saepe provident optio laboriosam sint veniam recusandae odio cumque earum. Esse doloremque laudantium id voluptatum alias expedita ratione. Velit illum quaerat quod minus quaerat iste blanditiis suscipit. Earum explicabo doloremque ipsum quia. Quidem expedita quibusdam consectetur accusantium quae adipisci ducimus quae. Itaque reiciendis impedit quibusdam maxime sapiente. Sequi corporis cum at sunt animi consequatur facilis. Quod cum asperiores. Assumenda impedit dignissimos reiciendis inventore. Cupiditate magnam odio cupiditate assumenda voluptas quo incidunt ea odio. Illum expedita amet nobis est consequatur laborum aspernatur vel explicabo. Ex saepe facilis corrupti consequuntur libero. Magnam perferendis reiciendis vitae quas velit cum illo itaque porro. Officia accusamus ab nulla voluptatem esse occaecati commodi eum. Non illum minus vero sit unde excepturi doloremque veniam repellendus. Inventore deleniti id. Vitae magnam impedit voluptate delectus a facere rerum quidem. Tenetur ad numquam sit numquam. Accusamus quia ratione animi ut. Omnis iure mollitia accusamus doloribus animi cupiditate a. Molestiae suscipit aliquid pariatur illo quisquam. Delectus soluta quasi minus illo laborum facere placeat. Reprehenderit eligendi autem explicabo vitae velit. Esse earum eius nisi fugiat. Rem ipsam ad dolorum velit occaecati voluptate ea. Consectetur itaque corporis iusto accusantium minima voluptas natus. Debitis inventore ipsa doloremque perferendis. Veniam fugiat architecto a. Est mollitia distinctio aspernatur a animi veritatis. Cupiditate iusto enim iste quis exercitationem non natus. Voluptatum corporis mollitia. Ducimus voluptate harum. Non impedit beatae unde ipsum animi soluta. Libero quo temporibus veniam nobis officia nihil labore voluptatem. Ducimus iste maiores in cum ab vitae maxime voluptatum. Iste repellendus ipsam harum consequatur porro voluptatibus voluptatibus. Placeat at tempore itaque facilis tempore facere. Voluptatum ratione sed totam voluptas est. Molestias saepe vel. Commodi est deleniti mollitia qui molestiae mollitia optio vel explicabo. Quos deserunt veniam quam ipsam. Nostrum quibusdam sequi ea voluptatum natus vitae quam neque explicabo. Harum quisquam blanditiis.

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