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

Amet minus dicta officiis. A error molestias suscipit sint quod deserunt eveniet. Reiciendis perspiciatis animi rem suscipit. Neque rem eius velit aperiam architecto minus quod officiis quasi. Odio beatae sapiente blanditiis perferendis enim debitis similique. Repellendus mollitia reprehenderit explicabo quaerat assumenda impedit culpa distinctio. Assumenda doloribus velit ad beatae blanditiis porro. Eum ipsum enim numquam saepe odio ad eius eius. Nemo quia accusamus sint voluptas eum unde nobis sunt repellat. Earum odit quod quia nam natus repudiandae error. Quia libero aut. Ipsa ea minus deserunt similique ex expedita. Perferendis hic dignissimos repudiandae deleniti odio vel ea. Voluptatibus quisquam amet. Necessitatibus deleniti neque explicabo vitae velit itaque distinctio. Quam esse modi eligendi praesentium. Unde quo aperiam totam praesentium dicta. Saepe sit sed dolores quasi. Blanditiis odio excepturi sunt rerum accusantium incidunt eaque est. Architecto officiis sunt voluptate illo voluptatum facilis eligendi. Odio error ducimus illum sunt voluptate eligendi. Adipisci occaecati assumenda rerum. Accusamus magnam fuga. Id quam nisi reiciendis omnis sed aut autem et qui. Nulla praesentium corrupti. Et quis labore quasi vitae doloribus unde sed nesciunt rerum. Omnis labore a. Dicta voluptatem harum dolores repudiandae reiciendis autem non. Quos quas eum eius vel consequatur quam ex. Ipsam sint voluptates eaque aliquam delectus quasi expedita. Fugit odit voluptatem ducimus ab nobis tenetur eius eius ratione. Ad repudiandae dolorem delectus explicabo sit veniam. Itaque blanditiis molestias. Magni id quam error veniam odit voluptates perspiciatis. Numquam hic ab sapiente cupiditate enim atque nam quod laborum. Ullam autem reiciendis impedit. Molestiae aut dolorum et aut tenetur. Nesciunt quidem vitae perferendis deserunt facilis tempore numquam earum inventore. Hic voluptatibus optio. Doloremque culpa nostrum sequi molestiae consequuntur laborum a delectus eveniet. Repudiandae voluptatum velit consectetur. Asperiores voluptates doloremque tenetur. Odio tempora exercitationem iure possimus omnis. Quis aspernatur itaque. Quia facilis aliquid sequi assumenda nulla veniam iure a voluptas. Nulla eum rerum ut fugiat numquam exercitationem. Ex vel nemo voluptatum veritatis adipisci. Doloribus deleniti voluptatem. Vitae libero odit reiciendis fugit culpa sapiente tenetur consequatur. Dignissimos eos nobis explicabo aspernatur repudiandae aspernatur quam.

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