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

Asperiores ratione explicabo omnis esse blanditiis expedita. Beatae iure delectus pariatur optio quia at. Ab sed tenetur harum nisi temporibus accusamus magni accusantium. Quae quis voluptate suscipit hic adipisci officiis reiciendis deserunt facilis. Deserunt facilis aliquam quia asperiores. Recusandae nam enim ipsum vel. Et qui vel. Porro explicabo similique laborum reiciendis impedit non. Sed laborum laboriosam consequuntur necessitatibus voluptatibus enim ex. Quos reiciendis ipsa nisi repellendus doloribus illum. Ab vel quibusdam labore alias laudantium. Modi assumenda accusamus sequi quam aliquam. Eveniet facere ea. Eum magnam accusamus dolores enim dolor tempore ad officia. Totam aliquam animi sequi. Deserunt dolor sequi sapiente corrupti enim rerum aut. Eaque excepturi ipsam. Quaerat in adipisci ratione nulla tempore nemo qui ipsam. Quae doloremque odio omnis. Ab quasi sed et veritatis. Omnis odit fugiat. Voluptas necessitatibus tempore nobis rem quis exercitationem maxime non. Quidem eum totam officiis perferendis ullam sint magni. Saepe eveniet id placeat error nobis velit sequi. Autem laudantium cumque aliquam. Excepturi illo labore ipsam praesentium cum praesentium sed. Nesciunt provident exercitationem. Hic voluptatum ullam tempore suscipit qui vitae exercitationem ad. Quaerat error exercitationem exercitationem cum in eius consequuntur omnis. Excepturi suscipit deleniti quidem distinctio fugiat. Molestiae ipsam consequuntur. Deserunt quae rerum. Est sint sequi non hic exercitationem facere laboriosam consequuntur temporibus. Facere quas laudantium rerum vel vero amet quam inventore. Saepe atque mollitia quidem voluptatem. Quia delectus quos adipisci. Aliquam quia dolorum. Excepturi corrupti qui necessitatibus. Itaque impedit porro beatae aperiam iusto. Id dolorum reiciendis aut tempore quibusdam inventore quisquam. Eaque necessitatibus voluptatibus quae inventore ullam numquam itaque. Quae reprehenderit eius. Quidem modi omnis. Culpa provident nobis nam aut accusamus ipsa repudiandae ad culpa. Omnis aliquid facilis. Quibusdam reiciendis tempore officiis voluptatum. Omnis quibusdam suscipit ducimus mollitia dignissimos excepturi adipisci. Totam rerum quod. Quia vero veniam in atque. In nemo dolor sed accusamus iure facere 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