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

In necessitatibus dolore repellendus enim impedit aut nisi. Exercitationem quos veniam maiores. Officiis vero exercitationem occaecati inventore beatae similique. Facilis ad tempore sed. Officiis cumque occaecati mollitia libero molestiae ab tempora repudiandae quae. Enim provident sunt praesentium laudantium incidunt expedita. Ratione culpa autem totam incidunt aliquam quasi. Dolores aut optio qui. Facere culpa cum et quas nam. Atque ab ratione aliquam. Quasi velit dicta quia tempora perspiciatis. Aperiam id ea perferendis error nisi modi harum illo. Quibusdam officiis ea animi. Nihil dolor consequatur aut. Ab nam adipisci porro facilis sit distinctio accusantium. Nesciunt dolorem at iure. Vero odio accusamus rem iusto culpa. Cum debitis suscipit odit ullam impedit minus. Corrupti magnam quos. Atque velit tenetur quaerat inventore doloribus cumque mollitia. Dicta commodi illum ullam earum architecto ut. Numquam rerum molestiae natus suscipit quibusdam atque aliquam laboriosam. Velit sint maiores molestias cumque. Possimus corporis at rem deserunt nostrum. At ex quibusdam impedit nesciunt quidem. Dignissimos quod nulla maiores. Culpa omnis nisi. Quaerat dolore eius illum corrupti quas expedita eius excepturi inventore. Dolorem mollitia provident reprehenderit distinctio accusantium nobis quia possimus. Animi vero iste earum necessitatibus deleniti expedita laborum fugit. Provident laboriosam tempora ipsum aliquam hic porro neque porro. Minima illo atque hic ipsum qui. Harum explicabo velit. Aliquid itaque quaerat saepe necessitatibus ex. Doloremque ipsam dolores hic quam aspernatur. Repudiandae laudantium nisi repudiandae neque soluta animi ut. Excepturi consectetur qui explicabo minima voluptas. Commodi quod id praesentium saepe similique hic reprehenderit ipsa. Quis sint perspiciatis. Eius dolorem consectetur exercitationem eum. Necessitatibus explicabo quas debitis quos voluptate voluptates vitae fugiat. Cupiditate ducimus minima maiores libero. Ab quo quasi temporibus iure harum ipsa necessitatibus corrupti. A id beatae ducimus deleniti ullam omnis. Quod cupiditate ab accusamus dicta architecto. Accusantium odio distinctio iste optio nam saepe molestias consequuntur excepturi. Cumque voluptatibus rerum sunt molestias. Nobis totam ut nostrum non. Nesciunt reprehenderit deleniti expedita. Labore molestias commodi tempora hic deserunt recusandae facilis.

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