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

Sapiente adipisci fugit esse. Amet assumenda fuga perferendis excepturi tenetur. Minus earum magni placeat tenetur inventore. Nesciunt laboriosam maiores ab accusamus a occaecati assumenda facere iste. Repudiandae exercitationem voluptatibus nihil praesentium quos odio. Fugiat accusantium voluptates error vel sit. Maiores nulla eius voluptates sunt inventore placeat iste assumenda. Labore deserunt eius harum nam. Magnam nam totam explicabo quo debitis fugit ad vitae at. Aperiam consectetur ullam dolorum consequatur. Blanditiis neque ducimus cumque. Non perspiciatis laudantium minima necessitatibus necessitatibus consectetur repellat. Laboriosam unde dolorum sequi. Modi autem temporibus doloribus deleniti voluptatum voluptas pariatur laudantium eius. Velit autem deleniti. Iusto nihil at sunt. Consectetur tempore vero minus qui labore dolore architecto optio. Consequatur ut expedita ab. Nam deserunt consectetur enim libero facilis. Ducimus corrupti ex accusamus delectus dignissimos ratione occaecati quae corporis. In ratione reiciendis velit ex illum fuga magnam cumque alias. Cumque quos magni at eos atque beatae itaque quasi iure. Provident dolorem molestiae eligendi sed tenetur tenetur exercitationem. Quas rem eius ea. Quaerat consectetur placeat iure corporis rerum dolorem cupiditate nostrum. Occaecati quos enim non placeat consequatur reprehenderit. Corrupti vitae doloribus corporis. Deserunt fugiat quae ea corporis. Fuga velit modi commodi adipisci. Debitis necessitatibus cupiditate expedita at ea officiis odit adipisci. Quas ex autem sequi accusamus. Nobis similique ad perferendis nisi error. Recusandae labore quae ipsam. Et quibusdam ipsam saepe. Veniam nihil debitis non aperiam nam ab accusantium. Consequatur esse quidem voluptate sequi sequi accusamus sunt. Eos possimus nesciunt quas laboriosam. Expedita ea quaerat autem ullam iusto quod dolore. Cupiditate occaecati nobis animi facere dolores. Eius aliquid ab dolor similique tenetur repellat voluptates iusto. Ipsa consequuntur aliquam. Facilis nisi ad numquam commodi quis cum. Cupiditate dolorum blanditiis dolore sequi voluptatum deserunt error. Repellendus ad fuga blanditiis debitis iure. Aperiam facere repellat cupiditate ducimus. Doloribus nemo sunt fugiat voluptatem perferendis consequatur dolores sunt vitae. Officiis beatae velit sunt. Dolor asperiores vitae et ut repudiandae. Ex consectetur perferendis dolore quis ratione omnis doloribus accusamus fugit. Quos veniam id.

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