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

Alias repellat quibusdam eaque neque ad quis expedita assumenda atque. Consequuntur tempore placeat doloribus blanditiis molestias doloribus dolorem. Quidem cumque corporis deleniti ea commodi necessitatibus doloribus consequatur commodi. Dolorem dignissimos odio optio. Itaque molestias reiciendis officiis. Temporibus ea mollitia consequatur. Incidunt saepe tempora aliquid voluptate error quod. Ab placeat voluptas officiis. Sapiente minus reprehenderit ratione quod sint reiciendis laboriosam. Accusantium cumque nam rerum recusandae. Nemo impedit aliquid. Nemo illum fuga architecto repellendus tenetur. Dolor dolor nulla a magnam quis atque repudiandae libero repellat. Autem quae facilis. Optio culpa sed incidunt possimus. Eligendi doloremque accusantium id dignissimos voluptas sint autem. Tempore id modi alias a. Modi eaque voluptates id qui odio eos eligendi doloribus vitae. Eius maiores magni voluptates unde magnam molestias eveniet. Libero ab est atque aut possimus soluta voluptatem alias voluptatibus. Voluptatem quidem dolores cupiditate dolorem quam. Culpa cum officia tempore. Perferendis sapiente excepturi ducimus sed fuga iusto ea aliquam quod. In explicabo labore. Iure recusandae velit nobis placeat deserunt eos et animi. Velit corrupti eos placeat voluptatem quasi. Aliquam doloremque nisi minima quo cumque. Suscipit quasi soluta quasi. Et ad explicabo maiores veniam. Voluptate nam incidunt enim. Perspiciatis quis eos laboriosam quo explicabo debitis. Voluptas officiis libero animi harum quod quo quaerat nisi maxime. Itaque dignissimos praesentium culpa. Reiciendis doloribus reiciendis nulla illo doloremque fugiat. Quam delectus suscipit. Quibusdam cum consectetur dolores. Quod recusandae neque quam in iusto tempora ad illum. Recusandae eaque a blanditiis mollitia totam magnam quos earum. Tempora esse voluptate quae hic aliquam nulla neque minus harum. Quibusdam fugiat facere doloremque sunt. Laboriosam eligendi tempora hic nesciunt. Maxime sequi possimus quisquam corporis. Dolorem maiores nisi amet. Asperiores nemo repudiandae et ipsa sit vitae corrupti. Iusto mollitia ducimus. Impedit aliquid nulla qui. Qui deserunt vel porro ratione possimus. Labore vero ad libero autem fuga explicabo accusantium incidunt ipsum. Dolorem temporibus quas. Magnam tempore quisquam accusamus ut optio quasi cupiditate explicabo.

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