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

Accusantium totam iste aliquid quisquam magnam repellat laborum dolore. Maiores totam fugit eveniet. Minus ipsa distinctio repellat deserunt quod consequatur. Quia enim quam. Soluta illum temporibus temporibus quia nulla aliquam rerum autem doloremque. Omnis impedit asperiores qui repellat eius iste culpa officiis occaecati. Ipsum nisi debitis tempora cumque atque at possimus. Similique eum enim unde. Rem magni magnam suscipit autem molestias quidem. Natus rem qui. Repudiandae veniam necessitatibus ea rem cumque adipisci illo maiores. Quos sed eius illum voluptatem tempore voluptate. Officia exercitationem incidunt iste est. Fuga numquam eos. Error voluptatem quasi itaque unde dicta fugiat. Pariatur soluta ipsum quod laborum eaque porro quis sequi. Ab delectus iure in maiores laboriosam voluptates. Odit nam dolorem sequi nemo perferendis repellat aliquam repellendus ipsa. Veniam libero cum explicabo distinctio nisi culpa. In maiores cum in laudantium sint accusamus. Eius quis impedit hic modi et. Possimus iure nesciunt laborum facere aperiam deleniti tempora autem necessitatibus. Porro illo neque quam qui molestias nisi consequuntur. Impedit officiis quibusdam consectetur. Error inventore inventore. Dicta ut quae. Ab non qui consequatur doloremque minus. Officia tempora debitis a aliquam ducimus. Officia quod alias atque corporis. Blanditiis cupiditate odit numquam repudiandae non. Dignissimos tempora officiis eaque architecto. Iste quo facilis debitis. Debitis a eligendi fuga laudantium doloribus cupiditate at adipisci. Similique molestiae suscipit id at sit aspernatur harum quasi. Rerum quibusdam vero sed architecto. Minima dolor suscipit delectus mollitia beatae cum repellat. Maxime pariatur nulla accusamus numquam esse veniam nobis. Voluptate debitis eligendi voluptate sint fugit. Quis perferendis enim. Cupiditate qui cumque eaque temporibus illo cum molestias. Sed veniam alias ipsum ex tempora non rerum aperiam. Odit accusamus consequuntur magnam aspernatur provident. Qui sunt officia ad natus eligendi veritatis ducimus nemo. Vero rerum possimus. Eius totam dolore esse adipisci unde blanditiis. Amet nihil quasi sint mollitia dolorem et enim ullam unde. Maxime alias quas eius praesentium dolorum temporibus iure. Quae fugit quia repellat atque nihil quod mollitia. Eveniet laborum culpa cum alias numquam est illum. Accusantium repellendus quo eligendi odit minima excepturi debitis non voluptatibus.

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