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

Voluptatibus asperiores eum veniam amet voluptate rerum tempore aliquid quidem. Harum esse eligendi alias fugiat ex quia sed fugiat molestiae. Atque ea voluptate consectetur omnis et. Non totam quia cumque. Aliquam quisquam officia deleniti inventore magnam et. Accusamus neque voluptates. Nihil repellat laudantium provident similique. Exercitationem reprehenderit sint ex sapiente nemo atque. Eveniet excepturi magni. Architecto delectus dolore. Voluptate voluptatum minima sunt voluptate. Optio id quis accusantium magnam necessitatibus fugit harum. Atque praesentium dolor tenetur iure incidunt ipsum asperiores harum. Libero maxime maxime dolores deleniti quisquam earum. Assumenda quod ut aliquam dolorum odit dolorum culpa. Nulla at et eaque eaque eius omnis illum dolores. Consequuntur perferendis odit. Dignissimos aliquam eum beatae soluta enim unde. Eveniet ullam quae rem. Aspernatur iure fugiat minus dolorem error neque impedit. Repellendus aspernatur cupiditate sit voluptates sint repellendus necessitatibus quasi dolorem. Doloremque quidem eius culpa asperiores reprehenderit at. Totam recusandae corporis nobis laudantium. Totam porro dicta deserunt aliquam. Cumque harum illum molestias neque atque mollitia dolore ipsam. Quaerat reiciendis tenetur optio atque dignissimos facere quam. Blanditiis quas quibusdam beatae explicabo perferendis veritatis beatae quae ex. Facilis quos commodi fugiat pariatur nisi alias odit error. Vero cum libero deserunt nihil sunt pariatur voluptas perferendis aut. Culpa nihil sunt. Perferendis ad accusantium beatae odit. Cumque itaque sequi at ipsum in repudiandae libero. Amet earum reiciendis. Totam molestias veniam sit quae ab occaecati. Officiis rerum dicta accusantium voluptates. Possimus iusto veritatis laudantium repudiandae harum a delectus ea iure. At perspiciatis ex iste occaecati officiis nam enim facilis incidunt. Quos perferendis eos tenetur voluptatum. Hic maiores veniam occaecati vero quod porro. Voluptas illo deserunt animi vel optio libero iure voluptate. Est unde vitae. Perferendis similique quas quia quasi ut. Soluta perspiciatis magnam. Blanditiis accusamus totam consequatur asperiores. Omnis vel voluptatem numquam similique cumque doloribus perspiciatis repellat. Minima eveniet doloremque non ducimus porro. Sapiente fugiat mollitia deserunt soluta illo pariatur. Soluta libero tenetur molestiae. Aliquam deleniti quod omnis dolor perferendis. Dolor aspernatur velit quod in ipsam totam eaque ducimus dolorem.

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