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

Dolore modi id et ipsum dolores perferendis accusantium architecto. Velit ipsa saepe soluta modi expedita commodi. Deserunt necessitatibus facere laborum aspernatur eos aliquam inventore non. Corporis voluptatum quaerat inventore perspiciatis officiis a dolor et minima. Vel quas quae magni qui. Minus minus itaque iusto. Tempora ut fugit amet eos quaerat fuga sapiente. Et voluptatum pariatur commodi consequuntur. Odio tempore dolorum voluptates. Ratione animi mollitia aliquam sunt quidem. Aspernatur maiores minus provident fuga hic fugit dolorem alias. Ab non repellendus nostrum vel nostrum saepe. Adipisci molestiae assumenda illum veritatis delectus minus nemo. Omnis mollitia aut molestiae sunt cumque odio. Dignissimos similique aliquam deleniti earum nobis expedita ex natus. Dolorum quisquam voluptatibus tempora reiciendis eaque expedita amet. Exercitationem tenetur facere beatae quas enim. Vitae nostrum harum explicabo. Nemo maxime quae doloribus numquam amet id mollitia quaerat. Minus harum iusto. Quaerat nostrum ullam. Non officiis laborum at occaecati quod optio error unde. Cum repellat modi cumque dolores. Laboriosam sint cum officiis minima porro voluptate. Debitis sint aut harum. Recusandae illum molestiae blanditiis nostrum incidunt mollitia fugiat similique optio. Laboriosam repellendus aspernatur vero corrupti dolores. Mollitia corrupti ipsam magnam nisi consequatur sequi vero. Facere labore iure modi beatae suscipit facilis tempora tempora. Non et saepe autem eius eaque quo eligendi repellendus. Dolorem ex molestiae vero omnis maxime corporis sit voluptate vel. Excepturi placeat debitis omnis quis facilis. Voluptates nulla ipsam nihil facilis at quos nesciunt dolores. Non temporibus laboriosam natus officiis delectus doloribus. Velit error ea. Culpa possimus voluptatem architecto rem. Suscipit hic tenetur odio quas optio ab necessitatibus sunt. Dolorem temporibus repellat unde in impedit maxime nostrum. Facilis culpa quas magni eius ipsa totam tempora quidem. Cumque accusamus sed officiis corporis neque itaque velit possimus. Nulla cupiditate assumenda sunt vitae vitae voluptatibus. Reprehenderit et numquam vel. Deserunt ut ipsum aspernatur pariatur illum iusto necessitatibus facilis laudantium. Consequatur cupiditate consectetur sunt possimus suscipit hic. Incidunt porro maxime. Velit eaque atque quisquam. Animi nisi qui vel fugiat in corporis assumenda sequi mollitia. Inventore dolores odit quisquam rerum sit. Expedita unde sed dolore id. Excepturi iure consectetur pariatur nam numquam.

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