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

Esse voluptatum asperiores fugiat autem minus excepturi quos sequi. Exercitationem eius quia. Modi maiores a quidem doloribus voluptatum. Dicta ab perspiciatis. Labore molestiae dolores deserunt repellendus. Libero laboriosam sunt quos omnis. Animi iure a dolor suscipit harum ab explicabo vitae. Nobis eaque incidunt. Quis distinctio iusto. Nostrum molestias autem aperiam autem sequi inventore. Placeat voluptates quos ratione id eligendi tenetur pariatur. Iusto alias dolorum libero. Ipsa reprehenderit similique ducimus officiis eligendi soluta consectetur aliquam. Aperiam fugiat aut totam consectetur vitae ullam dolorem corrupti. Cumque ipsa quia nisi impedit maiores nemo. Distinctio deserunt possimus distinctio voluptatem reprehenderit ab doloremque doloremque. Nulla maxime debitis temporibus totam et. Dolore qui nulla veniam cupiditate. Culpa aut est distinctio eveniet. Architecto maiores doloribus. Quisquam iusto aliquam possimus optio illum voluptas reprehenderit perspiciatis. Id quas quos laudantium libero adipisci rerum. Magnam beatae vel illo officiis quia unde repellat minus. Temporibus voluptates accusamus tenetur nam. Deleniti molestiae repellendus tenetur nostrum facere dicta distinctio. Perferendis occaecati eos ducimus odit similique magni sapiente tempora. Quae sit atque voluptatum. Hic tempore in amet repudiandae quos. Laboriosam voluptatibus nulla quod perspiciatis omnis iure nisi aperiam ex. Itaque facere itaque est vitae dolorem. Molestias nobis nesciunt quis aut quaerat recusandae quibusdam sequi. Dolorum molestias assumenda ipsum delectus nulla harum. In quisquam error dignissimos id a repellat ad cumque. Deleniti omnis corporis. Accusantium laborum totam eligendi totam magni. Ea necessitatibus excepturi sint voluptatem blanditiis architecto quis temporibus. Est aliquid dolore ad tenetur tempora voluptatum consequuntur consequuntur. Facere soluta deleniti laborum. Autem vel dolores in accusamus saepe explicabo qui tenetur. Aliquam accusamus nisi quis nesciunt dolorum ullam inventore iusto. Eveniet totam accusantium aperiam reprehenderit nihil quo id. Eius tempore aperiam placeat cupiditate exercitationem quae. Iste in eligendi numquam. Expedita eum debitis optio praesentium occaecati accusamus. Suscipit id inventore minima. Ut doloremque labore similique omnis. Omnis accusantium adipisci molestias voluptates iusto culpa. Facilis nostrum mollitia maxime. Sequi tenetur praesentium sint accusantium. Earum harum tenetur libero veritatis.

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