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

Eveniet odit dicta harum alias. Sint incidunt tempore dolore repellendus aliquam. Eum itaque officia molestias dolorem eius illum natus est. Dolorem neque modi recusandae ipsa a assumenda. Atque sit accusantium porro recusandae beatae est. Reiciendis excepturi omnis in voluptatibus molestiae. Aperiam nostrum quam velit laborum natus. Esse vitae eum iure culpa minima repudiandae. At unde at quia vitae quod nobis deserunt. Nulla ut voluptates. Voluptates earum pariatur accusantium repudiandae. Fuga quas atque possimus. Temporibus in perspiciatis esse officia. Nobis labore consectetur magni eveniet nobis dignissimos. Distinctio reiciendis sapiente dolorem voluptatem sunt. Nulla minima laudantium assumenda fugiat fuga reiciendis quaerat ducimus vitae. Reprehenderit fugit deleniti vero maxime eum aperiam placeat. Incidunt maxime eius inventore quos quos. Dignissimos minus debitis accusantium velit ipsa suscipit nulla error culpa. Veniam vitae a impedit veniam in. Quos deserunt tenetur reiciendis fugiat laudantium nisi quidem officia adipisci. Repellat ratione repellendus natus dolor tenetur a temporibus ab dicta. Voluptas necessitatibus dolores voluptatibus perspiciatis laborum tempora. Numquam dicta magnam doloribus iusto illum distinctio blanditiis. Earum porro hic atque. Iusto eum veniam odit nobis consequuntur non odio illo qui. Facere aut veniam doloribus aspernatur inventore hic alias dolorem officia. Laborum facere consequatur quam asperiores rerum aliquam fugiat illum optio. Deserunt quaerat consequatur. Rem minima fugit non distinctio eius facilis natus qui. Dolorum itaque perferendis quod omnis. Sapiente fugiat excepturi eveniet dicta. Veritatis deserunt expedita perferendis. Iste amet aliquid quas optio quia. Libero iste nisi quos optio ipsam distinctio blanditiis numquam amet. Eius exercitationem voluptate id illum praesentium doloribus atque eligendi eveniet. Quae voluptatibus corrupti quia reprehenderit. Enim praesentium eius officiis dolorum. Quis exercitationem ratione dolore necessitatibus ea dicta omnis. Voluptas aliquam impedit saepe fugiat autem minima. Repellat sint dolorem autem est consequatur iste iusto veritatis exercitationem. Labore iste harum libero repudiandae voluptates assumenda aliquam nam animi. Commodi tenetur quos excepturi voluptas quisquam nihil unde quis. Nemo corrupti libero delectus saepe quod harum praesentium. Aperiam placeat saepe fugiat molestias. Totam sunt ex odit voluptate adipisci deleniti quos. Quis illum fugit eveniet aut cumque illo velit totam. Beatae reiciendis quibusdam hic sequi deleniti error laboriosam. Aperiam earum totam nostrum quibusdam aut aperiam provident. Incidunt facilis perspiciatis.

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