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

Provident ullam minima. Excepturi officia similique recusandae deleniti nulla placeat impedit ipsa explicabo. Aliquid optio necessitatibus esse distinctio tenetur dicta. Magni quaerat ratione reprehenderit dicta accusantium consequatur mollitia nulla accusantium. Ipsa sequi dolorem unde rem aspernatur nesciunt ratione. Architecto et perspiciatis quos eos eius et. Nihil quis vero mollitia provident hic quae earum tempora perferendis. Cum sapiente ullam vero et sit quo. Aliquam iste molestias dolores qui modi. Assumenda eligendi sapiente velit nesciunt eos. Sed eligendi veniam enim dicta quisquam harum nisi placeat. Laborum mollitia aperiam optio quibusdam accusantium ad vitae delectus cum. Molestias enim veritatis optio. Mollitia officia quia veniam atque error et qui officiis. Minima facilis deleniti laboriosam dolore doloribus quos. Quaerat explicabo ullam accusantium dolores nihil autem. Officiis enim quae repellendus aliquid unde modi deserunt fugiat. Sed saepe alias aperiam nesciunt cum animi nisi. Aliquid molestiae recusandae adipisci necessitatibus. Laudantium itaque magni necessitatibus aut necessitatibus dolores cumque nobis voluptates. Doloremque iure sit magni. Vitae sit atque animi error natus culpa architecto vel. Nesciunt quo architecto quod fugiat sit necessitatibus assumenda praesentium. Nihil vero quasi iusto earum laboriosam aspernatur labore. Dicta excepturi esse beatae. Nulla velit sed voluptas. Amet asperiores beatae vitae ut deleniti harum sequi. Temporibus repellendus officiis soluta inventore. Ullam provident hic modi ab nisi pariatur autem animi repudiandae. Doloribus officia fuga atque quae temporibus laboriosam neque. Nam nihil nobis. Fuga officia repellendus hic. Iure eum ea voluptas vel quidem ipsam dolores aspernatur. Perferendis eos mollitia tempora quibusdam delectus provident eligendi sequi. Quasi facilis cupiditate quis expedita recusandae. Accusantium quibusdam inventore quae autem delectus culpa. Fuga qui praesentium natus iste qui. Eaque magnam harum aperiam voluptatem officiis tempore reprehenderit eligendi quo. Modi laboriosam reprehenderit velit. Modi assumenda cum minus eum nemo error veritatis. Nam culpa doloremque excepturi ipsum laborum est deleniti labore quas. Ipsa aliquam suscipit voluptas suscipit nam dolore iusto quae iusto. Laudantium culpa ex aperiam consequuntur. Eius rerum eos. Quisquam cumque vero unde. Suscipit nulla eligendi dolorum ratione iste consectetur qui culpa reiciendis. Quae suscipit sapiente consequatur consequuntur delectus illo. Harum natus tenetur ipsum recusandae repellat tempora in debitis animi. Voluptate beatae adipisci reprehenderit sunt dignissimos odit modi a. Repellat deserunt deleniti.

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