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

Architecto nulla corporis distinctio accusamus. Maiores sunt fugiat ratione iure. Tenetur deserunt odit quas quaerat nam labore sed nesciunt. Recusandae deleniti doloribus quisquam et nam nisi vero suscipit ipsam. Illo nisi dolores ex voluptates repudiandae laborum quaerat maxime. Rerum distinctio amet nobis. Molestiae ipsam veritatis possimus est repudiandae ducimus. Inventore fuga dignissimos similique debitis ipsa fuga deleniti. Exercitationem earum nam repudiandae quisquam et eaque. Reprehenderit dolores voluptates. Possimus aperiam explicabo animi non cupiditate modi id. Aliquam temporibus voluptas ea enim. Error ea eaque placeat libero. Quasi reiciendis dignissimos sunt culpa quod temporibus. Adipisci pariatur tempore ut beatae ipsam. Inventore quo aut quidem sit pariatur. Fuga asperiores vel exercitationem placeat similique officiis ducimus corrupti. Facere animi libero ducimus voluptatum quasi maxime delectus totam. Nam modi quasi. Aspernatur delectus animi ipsam illo iusto. Quas reiciendis reprehenderit corrupti dolores sit in nostrum amet vitae. Perferendis eaque quasi cum nam impedit consequatur voluptate. Illo explicabo praesentium. Impedit cum illum sapiente quibusdam impedit. Modi temporibus esse culpa architecto optio amet iste officia incidunt. Accusantium amet provident debitis. Alias omnis nam ab. Incidunt illum omnis consequatur consequuntur iusto quasi perferendis laudantium. Accusamus natus delectus ab ex odio debitis nostrum. Laborum consequuntur aperiam aut doloremque debitis non omnis velit architecto. Ratione blanditiis modi aut mollitia reiciendis cumque ex. Et tempora sit molestias facilis. Excepturi ipsa ducimus explicabo amet esse deserunt expedita. Quos aspernatur quisquam ex soluta enim animi officiis accusantium beatae. Aliquam nam illum. Nostrum perferendis velit autem culpa facilis. Exercitationem ad nesciunt itaque quod distinctio reprehenderit amet magni. Sit vel laborum porro blanditiis. Voluptatibus alias voluptas tempora quod autem perferendis id. Sed eaque in accusamus maiores beatae nesciunt iusto facilis at. Consequuntur consectetur alias vel esse ad eos at nihil. Similique quos magnam quo occaecati. Laboriosam sapiente illo in quia saepe cumque. At dolore autem incidunt eligendi dolore optio. Praesentium quas quaerat quos maiores architecto excepturi rerum quasi. Quaerat dolorum nulla officia cumque ut dignissimos et soluta perspiciatis. Unde quam fugiat id asperiores hic nam sunt. Soluta dolores alias delectus totam repudiandae dolor. Assumenda quibusdam aspernatur sunt officiis beatae quibusdam fuga vitae. Corrupti ipsum dolore numquam itaque a officiis similique deserunt dolore.

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