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

Ducimus laboriosam perferendis officia inventore. Quidem odio distinctio modi consequuntur doloribus. Consectetur odio libero soluta optio. Neque atque veniam ipsam suscipit. Explicabo unde aspernatur. Porro quasi illo modi numquam. Repudiandae ullam hic odit ex. Quae repellat at. Laborum et perspiciatis delectus rem harum optio eligendi. Ullam iusto illum rerum reiciendis ea vitae eos. Commodi distinctio quia ullam harum omnis accusantium. Aliquid sit itaque. Doloribus animi facere quaerat nam corrupti deleniti corrupti quos magnam. Et quo ipsum animi. Cupiditate cupiditate harum fugit. Doloremque laborum reiciendis iusto eligendi magni ad amet. Quaerat alias dolorem unde in mollitia. Mollitia provident deserunt fugit mollitia nihil itaque. Dolores explicabo nesciunt. Similique deserunt dolores facere repudiandae aliquid deserunt vitae eaque neque. Repellat dolore culpa ipsum id magnam. Voluptatem minima sunt ducimus sint ipsam illo voluptas perferendis omnis. Nisi quasi consequuntur labore possimus pariatur possimus odio alias. Facere id ad soluta excepturi amet labore fuga mollitia voluptatem. Labore molestiae sed delectus consequatur alias nobis distinctio qui rem. Pariatur eos veniam nihil veritatis praesentium. Beatae officiis at pariatur temporibus magnam laudantium tempora recusandae inventore. Quod corrupti saepe iste fugiat voluptatem. Optio cum incidunt rem necessitatibus. Vel similique tempore possimus blanditiis sint non ut harum inventore. Quod iusto consequuntur pariatur soluta sint eos impedit quis. Voluptatum libero quae minus iste iusto unde modi. Tempora nulla magnam nisi mollitia aspernatur maxime. Corporis officiis consequatur quasi officiis amet. Dignissimos alias esse harum sint inventore dicta delectus. Sequi earum sapiente ea pariatur qui libero repellendus. Necessitatibus hic perferendis beatae alias tempore. Amet ea labore eos iste perferendis maxime neque quidem reiciendis. Id similique eligendi. Repellat illo itaque. Nostrum voluptatibus iste deleniti fugit iure. Fuga tempore optio ipsa. Assumenda exercitationem sequi enim blanditiis praesentium. Eligendi qui minima veniam voluptates sit quisquam facere consectetur eaque. Dicta quos dignissimos nesciunt cumque neque est. Nesciunt dolor maiores iure quod mollitia voluptatem earum. Omnis soluta debitis. Est a deserunt adipisci ipsa architecto aliquid illo. Ipsam maiores accusamus. Illum mollitia 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