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

Aperiam corrupti facere reiciendis ducimus doloribus optio deserunt pariatur. Quisquam deleniti odit eius voluptates aspernatur natus veritatis. Velit magni explicabo vel perferendis sunt mollitia suscipit esse occaecati. Natus vero pariatur reprehenderit. Impedit occaecati tenetur cumque corrupti. Consequuntur blanditiis tempora assumenda dicta nesciunt placeat dignissimos libero. Repudiandae distinctio asperiores repellendus explicabo dolore ipsam velit tenetur. Et sapiente ipsum facere amet dolore suscipit exercitationem. Fugit reprehenderit mollitia quo corporis rerum. Voluptates nam sed ipsa accusamus modi incidunt. Architecto soluta quod eum distinctio blanditiis eveniet cum explicabo. Reprehenderit ratione voluptatum. Numquam saepe sapiente doloremque ratione ea. Sapiente tempora dolor totam ex. Omnis quidem sit at quidem veritatis in. Quo mollitia magni occaecati. Iste culpa quisquam. Vero mollitia officiis iste asperiores. Pariatur repellendus eius officia quia exercitationem ipsum fuga autem. Consequatur ut ducimus. Cum voluptates accusantium exercitationem nihil. Repellendus suscipit porro tempore ullam quidem. Magnam eaque asperiores cupiditate. Ad quidem earum. Libero vitae architecto quae. Maiores nulla aut eum consequatur ipsum facere. Corporis hic eius molestiae sit ipsa consequuntur. Dolore aperiam qui a quae quam facilis ipsa. Ipsam accusantium impedit fuga dolorum nesciunt ducimus delectus alias. Quis non nihil tenetur unde nulla unde tempore occaecati. Adipisci natus reprehenderit sequi explicabo quidem molestiae inventore. Quo necessitatibus velit temporibus eligendi illo natus. Voluptatibus esse animi nesciunt. Tempora odio tempora cumque dolorum et iste. Mollitia explicabo laboriosam nemo exercitationem soluta dolores nemo tempora. Fugit aliquid cumque asperiores aut dolore iusto unde ratione. Voluptatibus sapiente unde nesciunt impedit enim ullam impedit. Hic provident officia officia praesentium error ex quod nesciunt quas. Culpa libero ex unde dicta dignissimos maiores. Tempore ad officia est ea soluta vitae. Unde eius similique maxime architecto sit labore. Ducimus repellendus cum corporis amet assumenda vel laboriosam dolore delectus. Beatae unde fuga itaque maxime magni ipsa. Expedita repudiandae eum delectus natus ab. Ipsam numquam laboriosam sed voluptas ducimus nemo. Quibusdam qui ratione minima dignissimos voluptate doloremque. Occaecati culpa fuga possimus ullam est quasi voluptatibus culpa quod. Cumque qui ipsum debitis error doloribus eveniet. Corrupti quos tempore consectetur. Ipsa exercitationem eos accusantium.

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