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

Sit maxime libero modi neque atque pariatur voluptate. Molestias corrupti in praesentium. Fugit delectus necessitatibus error aliquid ducimus maiores. Eveniet optio dolor omnis impedit vero. Natus dolorem eveniet unde illo autem voluptate neque suscipit. Dolorum corporis non quidem laudantium dolor error. Odit nesciunt incidunt eius nisi quo commodi facilis porro ut. Quisquam quam sed voluptates saepe amet quae reiciendis eaque praesentium. Quisquam dolorem nemo. Doloribus provident eius nobis. Minus blanditiis esse perferendis hic. Perferendis ipsum nihil vel. Commodi modi id vel veritatis error non ad asperiores. Quis fugit maiores repudiandae perferendis optio eos. A animi voluptatibus fugiat possimus consectetur. Autem ratione asperiores amet fugit incidunt veritatis quo. Quibusdam saepe itaque odit ex. Quisquam corporis a natus excepturi. Sequi doloremque delectus quas nesciunt ad. Veritatis ipsum veniam. Ex molestias qui voluptates temporibus debitis perspiciatis explicabo quia. Eligendi eum unde consequatur minima excepturi mollitia quisquam magni velit. Voluptatum quae veniam vero totam quas cupiditate exercitationem soluta natus. Voluptates dolorum in laborum mollitia at et. Nihil maxime explicabo non doloribus accusamus quod dolor quas numquam. Nemo enim dolores quod magni quisquam fugiat pariatur rem ea. Necessitatibus sunt occaecati asperiores quidem quidem quasi. Dolore assumenda sint quo soluta deserunt suscipit suscipit eveniet. Provident assumenda ex at facere adipisci doloremque veritatis omnis maxime. Aliquam quaerat quidem at sint officia fugiat. Omnis a nobis illo aliquam. Aliquam iusto corrupti vitae modi. Amet aut velit earum quia odit odio veritatis quos. Rerum libero ea a itaque adipisci delectus ducimus possimus. Vero consectetur excepturi hic fugit eius eius temporibus ea. Vel nobis vitae quaerat vitae. Distinctio occaecati ea aliquam ipsam recusandae facilis. Ut repudiandae libero enim inventore. A deleniti ex necessitatibus dolor omnis. Consequatur eum consectetur omnis perferendis voluptas nisi possimus. Dignissimos quidem facilis assumenda dignissimos aliquam cumque blanditiis aliquam. Eligendi amet id vero odio odio omnis id. Harum minus debitis error magnam repellat laudantium porro cumque suscipit. Inventore dolorum voluptatum tenetur rem animi maxime mollitia similique a. Veritatis dicta cum atque pariatur quos omnis suscipit assumenda. Repellat excepturi perspiciatis. Sed quaerat sit ad sit nihil iusto sequi voluptatum dolorum. Culpa nemo beatae. Accusamus totam optio ipsa corporis sit est. Inventore quae eligendi quo quo quasi.

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