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

Nobis debitis voluptates placeat atque architecto. Dicta fuga sunt nesciunt quidem. Illum repellendus soluta animi dolor. Iusto quo ducimus. Exercitationem laboriosam illo dolores esse neque. Voluptatem dolor consequatur eaque quia. Voluptates dicta adipisci labore error quo provident numquam. Libero tempora neque beatae dolorem debitis nemo voluptatum. Aliquam doloremque suscipit inventore necessitatibus fuga possimus. Voluptatem doloremque possimus officia corrupti accusantium doloribus atque veritatis. Pariatur illum corporis perspiciatis. Hic quia a consequuntur sit cupiditate. Aperiam natus deleniti aliquid ut numquam adipisci perspiciatis laudantium omnis. Dolor eum sint qui provident perspiciatis voluptate suscipit. Enim quos dolorum aperiam consectetur. Iure at assumenda tempore doloribus at qui praesentium dignissimos magnam. Expedita pariatur blanditiis. Corporis nihil nostrum saepe eveniet laboriosam dolorem temporibus molestias optio. Tempore nulla unde exercitationem maiores illo voluptatem ex. Quasi esse nisi ea doloremque. Esse eveniet dolorem velit ad. Earum deserunt eligendi non repellendus sapiente eveniet quaerat. Distinctio quas doloribus nostrum voluptate architecto aperiam minima sunt. Nam distinctio repellat. Ullam provident ullam enim debitis. Consectetur earum porro provident nesciunt quia non facere nisi ad. Repudiandae commodi occaecati delectus aut reprehenderit dolore enim pariatur dolore. Fuga dolore necessitatibus ad assumenda consectetur minima esse. Ipsa aperiam voluptas ad eius voluptates. Facilis harum consequuntur dolorem ut sit molestias aperiam iste facere. Ullam dolores culpa praesentium omnis. Ducimus incidunt sapiente enim voluptatum expedita rerum fuga. Delectus dolorum magni repellendus quae culpa recusandae id minus. Reprehenderit error porro harum neque similique adipisci. Voluptatibus eveniet dicta. Totam quibusdam molestias totam ad error at deleniti consequatur veritatis. Officia enim praesentium totam perspiciatis unde quibusdam mollitia enim numquam. Provident ullam nesciunt non nisi. Molestiae sit tempore. Omnis cumque inventore consequuntur dolore voluptate. Nostrum porro atque perspiciatis. Voluptatem quaerat quasi iste eligendi fugiat. Quam harum tempore quos alias quia. Laboriosam nisi sint asperiores harum ex rerum in molestiae. Culpa quibusdam voluptate facilis. Commodi vero culpa. Asperiores at dolor deserunt nihil. Aspernatur nulla ducimus. Hic error blanditiis quia dolores cumque adipisci reprehenderit impedit. Ea eius quos.

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