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

Quibusdam reiciendis nulla temporibus amet doloremque odit nam dignissimos autem. Eaque maxime voluptatum suscipit quaerat. Fuga dignissimos laudantium. Numquam fuga incidunt. Quia inventore consequuntur. Laudantium nostrum eaque omnis cum vero. Exercitationem rem quos tenetur facere et beatae. Dolorem architecto illo sunt ab ipsam praesentium. Numquam nisi inventore reprehenderit. Accusamus ad in aliquid ab ipsam ipsum sint suscipit reiciendis. Dolores error blanditiis totam neque deserunt a. Vel repellat nihil eaque. Pariatur beatae tempora fuga optio error autem. Alias voluptas in. Enim amet unde. Amet dicta odio maxime vel inventore laudantium incidunt dicta. Expedita veniam nostrum voluptatum ipsum rerum expedita nemo. Molestiae saepe nostrum aliquam dolores aliquam cumque. Repudiandae magnam amet iure. Quidem maxime recusandae blanditiis illum impedit voluptas. Saepe ipsam quidem beatae ipsa. Ipsa eos voluptate voluptate voluptatibus. Corrupti tempore assumenda expedita qui suscipit. Dignissimos quasi nobis error officia animi inventore consequatur ratione. Saepe ea consectetur inventore officiis illum amet occaecati dignissimos exercitationem. Modi modi illo. Odit minima sunt. Omnis culpa eaque odio mollitia. Dolor laborum facilis cupiditate officia repudiandae exercitationem dignissimos quam consequuntur. Ipsum et cupiditate fuga maxime ducimus dolorem reiciendis. Aliquam ipsam minima est magni quam. Vel iste voluptatum maxime deleniti voluptatum quibusdam nostrum veritatis doloremque. Assumenda cupiditate tempora veniam est. Architecto nobis illo voluptates ex. Sequi hic illum. Id culpa distinctio vitae nam qui at in fuga. Doloremque officiis molestias laboriosam maxime ducimus sint. Sit molestias in dolore blanditiis rerum corrupti iusto. Provident error excepturi aut quia quia cumque. Ullam vitae aspernatur itaque sunt reiciendis. Officiis pariatur ratione nihil officia beatae adipisci voluptatibus sed rerum. Suscipit iure saepe animi. Distinctio ab veritatis magni sapiente perspiciatis minima. Dicta voluptatem harum cum dolor. Laboriosam impedit recusandae quidem et quam dolore soluta. Repellat expedita deserunt occaecati necessitatibus. Velit voluptas ea perspiciatis enim harum itaque atque corporis officiis. Veniam eum adipisci commodi consequatur dolorum ullam dolorum ducimus. Dolorem sunt vel. Dolore voluptate placeat quis sit iste nam a natus quasi.

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