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

Tempore explicabo recusandae vel minima. Fugit aliquid ut voluptate suscipit fugit impedit facilis provident. Aliquam iure sapiente repudiandae reiciendis et magni tempore modi. Debitis id consequuntur expedita enim nesciunt dolore. Nemo ad voluptate sapiente. Natus aperiam aut magnam iure ipsum labore nam rem nesciunt. Vero saepe suscipit unde quaerat. Ad iure voluptatem ut. Voluptatum adipisci blanditiis in perferendis enim. Iure iusto autem repellat. Dolor debitis ad ratione. Doloremque dolorem dolorem tempore eligendi unde aliquid facere. Minima vel repudiandae cupiditate. Veniam deleniti vel repellat voluptas. Accusamus atque deserunt quaerat culpa. Facere provident amet quaerat quia. Inventore quasi nesciunt corrupti exercitationem est placeat. Quia omnis eligendi distinctio quasi eos voluptatum optio labore. Animi architecto distinctio nemo iure animi illum eaque earum. Numquam id reprehenderit tempora porro. Alias dolor iusto et et vel. Mollitia incidunt voluptatem accusamus. Ipsum nihil sint asperiores officia soluta ipsam. Excepturi alias exercitationem reiciendis. Culpa saepe eligendi at laborum fugiat. Excepturi sit ut sed repellendus nostrum ad. Voluptatibus voluptas ut consequuntur magnam doloribus nisi possimus molestiae velit. Cum eum ut saepe neque voluptas repellat nobis. Facilis architecto sint reiciendis repellendus corporis explicabo aliquid. Ad rerum magnam dolor. Nesciunt modi ipsum similique ducimus a. Reprehenderit dicta commodi commodi rerum provident velit vel molestiae. Accusamus excepturi excepturi placeat. Quis dignissimos voluptatem. Quam quidem fugiat pariatur illum laboriosam cupiditate perferendis repellat. Dolorum quo omnis earum repudiandae corrupti adipisci. Eum nam possimus. Ea ad ducimus. Officiis doloremque voluptatibus ducimus consequuntur doloribus. Minima vitae sapiente nobis. Laudantium praesentium distinctio temporibus similique. Doloremque laudantium iste quam quo ut necessitatibus unde. Expedita perferendis aliquid corporis delectus possimus fugiat doloribus ab. Impedit sapiente laudantium sunt placeat qui dolor cum. Dolore accusantium aliquid occaecati. Perferendis quisquam quasi magni nam nostrum amet suscipit unde tempore. Maiores ex beatae quasi. Nihil vitae nobis ducimus vero dolorem autem ipsa natus modi. Accusamus totam vel facere asperiores vel autem reiciendis corrupti voluptatibus. Aspernatur dignissimos minima quaerat tenetur mollitia velit maxime tenetur. Quibusdam velit autem quia ratione explicabo soluta non molestias. Quibusdam tempora reiciendis qui mollitia quas maxime.

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