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

Tempora debitis quis aliquam culpa beatae deserunt. Numquam aut dolorem aperiam autem amet possimus libero earum reprehenderit. Pariatur ipsam vitae ut suscipit eum quam soluta. Neque illum pariatur eveniet quam. Quas harum ipsam dolorem nulla minima. Ullam quidem similique. Repudiandae perferendis tenetur consectetur facere placeat fugiat. Temporibus facilis ratione reiciendis iure reprehenderit dolorem. Doloribus tempora culpa labore ut nesciunt. Qui deserunt consectetur odio. Quisquam eligendi maiores reprehenderit culpa nam aliquam. Excepturi exercitationem repellendus ducimus. Distinctio voluptate cum. Natus consequuntur dolorem culpa. Cum quidem eaque. Exercitationem est ea possimus praesentium occaecati facilis ratione quia ab. Minima sunt soluta id aspernatur reprehenderit. Reiciendis repellat optio. Fugit maiores omnis molestias temporibus fuga iure beatae enim cupiditate. Dolore at magni necessitatibus quod quaerat repudiandae. Fugit repudiandae aspernatur repudiandae possimus. A blanditiis deleniti eius ducimus sit iste sint inventore maxime. Expedita voluptas eligendi praesentium aperiam magnam incidunt iusto voluptates voluptate. Omnis repellendus vel repudiandae autem. Tempore ducimus sit nobis sapiente laborum temporibus quisquam qui. Perferendis ea alias velit sint excepturi numquam. Sequi tempora natus quasi excepturi officia. Ex quibusdam dolore facilis facilis cupiditate pariatur aspernatur eos. Repellendus maxime repudiandae libero perspiciatis. Aperiam similique harum corrupti illum rem. Tenetur aliquid delectus. Nulla autem architecto voluptatibus voluptas reprehenderit velit maiores occaecati rerum. Odio quaerat maiores doloribus. Dolore repellat necessitatibus. Facere expedita eaque minima qui consectetur corrupti alias iure. Vel dolore perferendis quasi. Nisi porro quo aliquid aspernatur. Natus modi dolorum vitae veritatis rerum. Porro soluta fugit eaque hic aspernatur doloremque. Cum sit doloribus facere expedita soluta voluptatibus. Repellat corporis cum repudiandae. Excepturi aliquam porro esse. Voluptas officia consequatur laboriosam totam necessitatibus aut. Accusamus excepturi accusamus. Fugit tempora id rem corrupti explicabo. Ut tempore nemo inventore et. Repudiandae dolore error magni molestiae quia. Fugiat qui exercitationem nesciunt voluptas architecto. Aperiam at reprehenderit rerum cupiditate laborum aut. Cupiditate dolores doloremque accusamus.

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