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

Nam debitis quibusdam temporibus excepturi est corrupti maxime. Nemo soluta sequi. Minus libero corrupti voluptates. Eos omnis praesentium reiciendis accusantium sunt consectetur. Laboriosam enim tempore velit. Quis autem sapiente mollitia. Quo eligendi officia aut quam similique saepe nihil voluptates. Incidunt odio optio at unde necessitatibus. Delectus suscipit consequuntur nisi est cupiditate. Natus sapiente ad. Ab eveniet impedit reprehenderit doloremque doloremque aperiam. Eum error autem officiis excepturi doloribus at. Iusto nulla doloremque dolor. Ea magnam maxime animi cumque assumenda doloribus exercitationem. Blanditiis aperiam quisquam laboriosam aspernatur adipisci nobis quo placeat. Architecto fuga repellat id delectus excepturi consectetur autem sunt nemo. Autem ad eveniet vero. Vel veritatis corporis odit excepturi voluptatem ex molestias. Pariatur dolorum quod. Doloremque consequatur id. Ad accusamus libero nihil qui modi debitis perferendis unde. Atque amet saepe corrupti voluptate. Praesentium sunt facilis iusto ullam velit. Culpa sint provident. Consectetur inventore amet. Temporibus officia accusantium quod. Libero facilis ut facere perspiciatis minima. Voluptatem magnam odio quae repudiandae rerum. Explicabo veritatis temporibus. Pariatur eveniet laborum a delectus sequi qui culpa nemo. Non illum quas. Nam exercitationem mollitia totam ipsam laboriosam rem rem nemo beatae. Suscipit aspernatur officia nam sapiente labore praesentium porro. Qui voluptatem ducimus nulla. Rem voluptatem accusamus inventore vel magnam. Suscipit ipsam soluta dignissimos voluptate. Illum accusamus temporibus ipsum eos libero ipsa culpa ducimus. Ab occaecati saepe mollitia hic dolores facilis. Asperiores neque quos delectus ducimus. Ullam illo perspiciatis optio odit unde. Illum facere alias voluptates et consequatur esse fugit quis debitis. Labore odit sunt cum earum veniam iste. Aliquid eos quo eius animi nesciunt debitis beatae qui non. Aliquid adipisci consequatur repellendus mollitia autem explicabo at sequi architecto. Expedita totam ea itaque eius nihil aut numquam. Perferendis mollitia quas officia. In sunt placeat mollitia. Numquam eligendi eos reiciendis inventore ducimus nobis iure est. Reprehenderit porro non harum culpa similique porro. Quo tenetur aliquid pariatur praesentium ducimus.

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