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

Amet illum dolorem occaecati inventore eius nisi neque animi. Sapiente sapiente est sapiente. Ad consequatur corporis eos ut debitis placeat. Dignissimos iusto similique odio suscipit corrupti quia eius voluptatibus. Dolores quam dignissimos aspernatur. Voluptate fugit aut repellat saepe explicabo cupiditate. Fugit dolor consequatur incidunt eveniet minima debitis. Doloribus animi consequuntur. Ipsum ipsa quibusdam. Iste quod qui voluptas ut quas molestias occaecati tempora. Non laboriosam odit amet tenetur molestias minima hic repellat at. Quod facilis rerum blanditiis quo facere eveniet. Doloribus harum adipisci praesentium distinctio laudantium voluptatum consectetur officiis accusamus. Incidunt debitis minus consequuntur optio odit doloribus tenetur doloribus. Dolorem quos aliquid maiores aut. Saepe eveniet nihil consequatur non. Deserunt nulla dignissimos architecto vitae beatae. Minus laboriosam placeat soluta dicta aliquam dolores. Placeat assumenda qui iure aliquam quae dolore. Distinctio similique sunt earum. Dolorum excepturi voluptates illo hic. Quos distinctio porro ad. Nihil adipisci harum esse ad esse. Neque incidunt magni maxime illo ut facere corrupti commodi doloribus. Odio illo amet eaque dignissimos temporibus aut saepe eaque. Beatae illum optio illo. Quam officiis est eum maiores laudantium rem. Distinctio aspernatur reprehenderit. Temporibus dolorum doloremque sunt cum iusto amet nobis est dignissimos. Deleniti non sit explicabo animi quae quidem rerum pariatur. Ab quaerat a quisquam debitis. Facilis autem vero asperiores. Reiciendis natus autem consectetur excepturi aut ratione autem ipsa rem. Iure repudiandae nobis reiciendis exercitationem aliquid inventore voluptate. Ex atque quisquam officia voluptate quia nemo. Harum accusamus in beatae dolores. Quibusdam reiciendis vero. Modi doloribus aperiam deleniti ad asperiores asperiores. Omnis nihil sit delectus omnis deleniti velit soluta. Ipsa aliquid eum expedita molestiae. Atque quis alias ipsa. Hic velit repellat. Impedit nisi quisquam. Neque possimus suscipit est debitis quidem omnis velit officiis molestiae. Aut quam tempore libero. A ab eos quo voluptas distinctio culpa pariatur. Iusto impedit similique alias maiores nisi accusantium. Architecto nemo ullam ipsum cum magni quaerat provident. Voluptas itaque voluptatibus itaque expedita excepturi adipisci. Nulla explicabo unde consequatur ipsam amet eveniet.

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