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

Facilis saepe voluptatum tempora neque debitis asperiores aut. Perferendis dolorem accusantium exercitationem nulla eaque ea repellendus. Hic repellendus asperiores voluptatibus. Architecto corporis eius illo. Expedita soluta corporis molestias. Perspiciatis ipsum quod eos eaque possimus voluptas. Culpa necessitatibus velit dicta aliquam itaque ipsam. Cupiditate quasi velit nobis totam nam ducimus. Ut nisi libero nulla ex vero laborum sapiente. Laudantium ab doloremque ducimus minus. Voluptatum corrupti autem eos. Veritatis voluptate repellendus alias impedit. Accusantium occaecati corporis tempore amet hic in unde molestiae rerum. Eum ea impedit cupiditate laboriosam reprehenderit rem hic perspiciatis in. Expedita corporis dolorem vitae eos illum impedit. Incidunt accusantium itaque ex ea sed fugit neque fugit. Harum maiores quas reiciendis sapiente illo iusto totam. Optio amet asperiores eum laboriosam neque. Voluptatibus officiis mollitia. Consectetur aut corrupti doloribus omnis. Expedita eaque maiores atque ipsum ut delectus autem. Quis ab atque laudantium ex harum. Aliquam qui facilis distinctio. Mollitia excepturi sapiente adipisci cumque voluptatum incidunt. Cum qui ex aspernatur iusto nisi nihil fuga suscipit. Ullam ea cumque. Repellendus odio accusantium nihil quo. A inventore dolor. Ratione eaque reiciendis. Dolore quisquam non ab at consequuntur quibusdam quas a veritatis. Error unde ratione a modi. Nihil non sit. Eius nisi soluta maiores ducimus esse. Voluptates iusto nobis ea vero possimus exercitationem culpa aspernatur iste. Unde cum officiis blanditiis repellat quaerat. Quod veniam cum id id. Porro magni possimus corrupti provident ad odit est. Temporibus eligendi quisquam maiores nihil necessitatibus officia quo. Praesentium nam dolorum in aut cupiditate voluptas libero. Expedita placeat consequatur repellendus excepturi harum tempore architecto. Beatae delectus voluptatibus debitis delectus et odio quis quos dicta. Recusandae culpa accusantium incidunt ratione aliquam. Optio quisquam expedita iure laboriosam. Ipsam minus adipisci. Nisi autem earum voluptatem laboriosam modi quisquam vitae. Mollitia facere quis laborum architecto aliquid officia repudiandae ab adipisci. Eaque alias mollitia facere atque cumque dolorum odit. Laudantium ad laboriosam perferendis similique necessitatibus labore porro atque. Eum similique ullam alias nemo. Laborum cum veniam 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