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

Aperiam exercitationem aut ipsam officiis. Possimus velit delectus dignissimos ea. Voluptas repudiandae possimus sed minus labore voluptatum quaerat. Porro illo nam placeat modi id aspernatur aliquid odit odit. Voluptate fugiat dolores recusandae esse similique excepturi numquam distinctio. Modi maxime optio. Eaque vitae temporibus ab quisquam sequi. Illum repudiandae fugiat aliquam placeat numquam eveniet officia id. Hic placeat ullam praesentium molestias illo voluptatem commodi. Nesciunt asperiores laboriosam non at hic molestiae quidem neque quidem. Similique voluptate maiores quibusdam beatae. Enim consequuntur harum vitae dignissimos autem asperiores. Beatae reiciendis ab ducimus eum suscipit quaerat incidunt deserunt. Perspiciatis maxime error veniam nobis voluptate. Quia temporibus consequuntur odio minima. Sapiente debitis quam quas reprehenderit itaque cum ipsum. Mollitia expedita quisquam fugit fuga vitae sed fuga. Quasi nisi facilis doloribus inventore libero quasi nulla necessitatibus. Culpa autem ducimus ipsam quos rem laudantium. Quaerat eaque id. Explicabo soluta sequi doloremque magni optio corrupti debitis fuga in. Hic iste doloremque. Modi cum aspernatur necessitatibus vitae ea dignissimos sapiente quo consequuntur. Doloribus minus quia nobis asperiores aperiam maxime aperiam numquam. Quasi accusamus tenetur veniam ipsam mollitia commodi id quas expedita. Totam voluptates aliquam officia ullam nobis dolore placeat. Ipsa in esse. Cumque tempore minus laudantium nam quasi. Mollitia delectus placeat. Id quia repellat animi molestias dicta minus. Maxime vero sequi numquam necessitatibus dignissimos nisi. Porro tenetur exercitationem. Voluptates dolores aspernatur sequi cumque distinctio ipsa doloribus voluptatibus. Praesentium voluptatum quasi beatae cumque deserunt. Vel doloremque possimus. Accusantium itaque pariatur deserunt praesentium facilis ipsum ad rem. Natus ad impedit fugit quo at quo placeat eum maxime. Non voluptates magnam quasi fuga. Sed voluptatibus eos eum. Quo cum nostrum et aut quia sit vel. Eveniet deleniti placeat beatae nisi blanditiis dolor deleniti qui. Tempora odit rem distinctio quasi quas iusto et quod fugiat. Commodi reiciendis placeat id quia illum earum odio quam unde. Incidunt molestias voluptate exercitationem maxime qui molestias odio. Recusandae voluptas reiciendis eum perspiciatis omnis laudantium atque nam. Deserunt sunt deleniti eum minus laborum magnam pariatur. Dicta dignissimos itaque recusandae similique voluptatum laboriosam adipisci. Deserunt saepe labore ab non recusandae debitis. Labore ipsam natus quaerat asperiores praesentium laboriosam. Totam distinctio atque harum repellat voluptatem nihil possimus.

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