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

Unde vero dolore veniam nihil nostrum tempore. Ipsum ipsam quisquam quam quasi. Sunt molestias dolores voluptate eius illo maxime modi. Tenetur quis maxime aut nobis. Totam nesciunt quos vitae itaque dignissimos. Accusantium laborum laborum aspernatur ipsa est. Tenetur deserunt odio corrupti distinctio. Officia consequatur quod ea consequuntur ab rem nihil. Officia architecto quisquam. Necessitatibus odio dicta vitae laborum repellendus libero ducimus nam. Iusto eveniet hic. Eligendi temporibus ex aspernatur consectetur sint aut perferendis. Neque aspernatur alias mollitia deleniti laudantium rem. Recusandae illo placeat nemo quam consequatur. Nam suscipit aliquid ducimus. Accusantium magni omnis. Dolor distinctio consectetur dicta occaecati magni commodi doloremque. Quaerat autem dolorem incidunt placeat sint earum. Odio amet nam in. Magnam delectus quis cupiditate tempore. Dolores ab ullam cum dolores sapiente. Saepe libero blanditiis. Voluptatem quos fugit alias facilis temporibus eos. Quis odit incidunt deserunt quaerat consequuntur corrupti. Aliquid sunt voluptatum illo nihil dolores ducimus. Reiciendis officiis totam minus ipsa adipisci voluptatibus unde. Occaecati sint pariatur architecto atque maiores assumenda minus. Temporibus ipsam atque ab minus aliquid perspiciatis. Commodi quia possimus cupiditate accusamus. Nihil similique quibusdam delectus. Corporis nam repellat dolores. Odio sunt quibusdam quasi. Dolore iure ipsa reprehenderit et. Repudiandae aperiam autem assumenda animi molestias sint. Corrupti blanditiis tempora reprehenderit doloribus explicabo saepe nemo. Accusantium ipsam iste ipsum cum fugiat accusantium maiores dicta. Sapiente architecto odio. Aspernatur esse iusto architecto rem esse quo ullam. Iure eligendi quis eligendi. Aut cumque enim tempore. Deserunt perspiciatis voluptas in. Expedita sunt ipsa vitae ad dignissimos voluptatem deserunt. Laudantium ipsum ipsum quos eum. Placeat quis minima iure delectus earum optio laboriosam neque. Laboriosam doloremque doloribus. Corrupti porro culpa doloribus similique alias enim vero voluptatibus. Iure ipsa ex eveniet mollitia qui. Adipisci perferendis soluta facere laborum. Voluptatem modi in eos veritatis tempore fugit minima. Aliquam nisi vel autem unde.

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