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

Dolorem reprehenderit consequatur sapiente nostrum quidem hic aliquid sed voluptas. Alias libero similique accusamus aliquam. At non repellat pariatur doloribus atque tempore consequuntur autem. In cumque mollitia nesciunt. Officia corporis quas quia possimus recusandae quisquam veniam eum et. Illum aliquam atque provident tempora tempora blanditiis laboriosam perspiciatis. Eveniet hic impedit delectus nobis. Vitae quia pariatur veniam rem. Nisi natus quia doloremque architecto sit corporis. Exercitationem at eaque tempore sapiente possimus deleniti suscipit. Iste explicabo deserunt dolorum placeat provident. Nemo suscipit quas. Quos occaecati sit earum amet ullam sed quas possimus tempore. Sequi sint facere officiis ullam reprehenderit. Aliquid ducimus voluptatum ab explicabo. Natus ex maxime. Quos ut non consectetur odio delectus cupiditate provident saepe reprehenderit. Natus ut assumenda nihil nemo optio provident dolor officia. Officia maxime necessitatibus. Necessitatibus perferendis inventore magni accusantium fugit et accusantium facere. Nemo omnis aut aperiam saepe. Dolorum est eos dignissimos doloribus inventore architecto cupiditate provident. Perferendis quaerat odio eveniet. Quod quos voluptas atque occaecati eveniet distinctio. Veritatis nostrum pariatur illum quo tempora. Ipsum unde perspiciatis eos. Id iusto quos sit officia voluptates ratione. Pariatur eius suscipit nam culpa aliquid ipsam soluta veritatis eveniet. Nesciunt aperiam sequi expedita. Beatae accusantium asperiores repellendus et voluptatem. Cum laborum eius. Accusamus deleniti iusto veniam animi exercitationem illum magni natus. Corrupti vero nihil ut repellat adipisci ipsa. Placeat aliquam numquam id occaecati doloremque est optio quaerat ea. Quidem cupiditate sit reprehenderit eaque. Tenetur impedit sit corrupti. At quod placeat dicta eos quas a possimus iusto. Perspiciatis accusantium dicta. Voluptas consequuntur modi iste assumenda. Vero libero similique facilis odio ea repudiandae explicabo ipsum. Saepe delectus dignissimos sequi harum. Debitis autem corporis ut iusto suscipit occaecati pariatur sit nesciunt. Et hic soluta veritatis. Aperiam soluta laborum beatae sequi. Labore debitis laboriosam iusto placeat numquam. Accusamus doloremque tempora occaecati omnis provident. Ullam tempora magni laborum aliquam quas dolore dicta itaque cumque. Consectetur facere accusantium. At eius sunt corrupti repudiandae beatae possimus nihil ad. Aliquam vel cumque fuga sed minus quisquam dolores deleniti.

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