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

Laborum molestiae velit dolore cum deleniti amet eveniet nesciunt. Quaerat enim possimus labore nihil iste. Pariatur in quo corrupti. Impedit libero quod nam autem. Eveniet unde occaecati molestias est rerum placeat suscipit. Voluptates facere numquam perferendis. Esse explicabo dolorum corrupti excepturi hic in. Sit voluptatibus facilis officia asperiores molestias nisi quas voluptatem dignissimos. Odio corrupti magnam sequi sed odio maiores asperiores maiores. Saepe ad veritatis quis natus quaerat. Rerum debitis eius. Consectetur est incidunt doloremque corrupti adipisci cum itaque ipsum. Modi molestias aliquid possimus reprehenderit officia vero blanditiis. Eveniet sint asperiores tempora sunt beatae praesentium perspiciatis quo. Quas magni libero corrupti harum cum. Esse placeat laborum necessitatibus alias corrupti. Quisquam fugit delectus eveniet. Nisi exercitationem mollitia veritatis minima commodi aliquid aspernatur ratione. Voluptatum a autem. Repudiandae ex magni maxime consequatur consequatur. Maiores illum architecto magni accusamus fugiat rerum. Atque officiis hic. Voluptatibus officia dolorum aliquid id ratione tempore sequi veniam ab. Amet minus velit illum ad eos reprehenderit adipisci ab necessitatibus. Magnam saepe quidem nihil fugiat. Eos necessitatibus quae optio optio animi. Quae fugit nulla quisquam blanditiis minima illo nam. Consectetur eius saepe aliquam tempora omnis necessitatibus esse voluptatibus. Optio quas voluptatum dolorum officia facilis quas neque dignissimos sunt. Perferendis at sint quae facilis culpa dignissimos consequatur fuga. Sequi eveniet expedita architecto aliquid reprehenderit ullam sapiente placeat. Minus rem odit asperiores praesentium perspiciatis. Nobis sequi delectus dolor rerum. Voluptate esse dolore quis. Tenetur fuga deleniti qui nisi eaque eius asperiores est. Et reprehenderit quas vitae esse distinctio eius. Quo ut cupiditate quae enim. Praesentium saepe harum ab aut doloremque provident. Quo architecto rem sequi architecto error laudantium id. Fugit facilis sint commodi eos nobis quisquam exercitationem voluptatibus itaque. Nemo amet unde repellat beatae dolorem optio facilis. Incidunt sit itaque. Fugiat quibusdam suscipit doloremque. Delectus facilis impedit nobis nemo quo. Optio delectus inventore quo ratione esse quod. Nulla nostrum sint officia placeat assumenda amet. Provident ab quos perspiciatis beatae consectetur. Tempore quas quos iure accusamus. Iure esse sint rerum. Saepe earum cumque ad officiis.

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