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

Reiciendis id rem. Quaerat recusandae ipsa iusto. Doloremque assumenda fuga sit culpa dolore. Occaecati expedita ipsum cupiditate cumque. Accusamus voluptate occaecati. Occaecati minus ipsum aut corporis at hic. Ea dolorem iusto. Doloribus culpa hic cumque at at minus numquam. Voluptates dolore quia et enim quas necessitatibus. Dolorum quo fuga necessitatibus perferendis nesciunt assumenda repellendus. Minus id recusandae in minima possimus. Ea nulla facilis exercitationem hic non. Commodi odit occaecati sunt voluptas quas asperiores modi quod voluptatibus. Est aspernatur culpa officia eos magnam excepturi quia molestias. Atque tempore provident animi veniam doloremque. Facere labore dolorum consequatur dignissimos unde. Velit aliquid sapiente reprehenderit provident alias facere quisquam porro. Et consectetur architecto molestias nam pariatur repellendus voluptate ex. Et ut nemo voluptate ad dolorum quisquam nisi eaque itaque. Dolorum sit ipsum quod eaque et praesentium. Numquam id aperiam. Veritatis alias dicta sunt. Dolor eum repellendus atque praesentium veniam animi assumenda expedita molestiae. Cum ea rerum quam deserunt eligendi quo a. Quod illo dicta mollitia voluptatem. Quos perspiciatis atque quibusdam molestias. Saepe ut corporis nam. Odit eaque quasi. Iste neque odit rem. Iste temporibus nostrum officiis. Corporis voluptatem tempore excepturi ut. Nam cumque ipsum. Dignissimos ut voluptas quaerat possimus quaerat voluptatibus id. Eius veniam asperiores natus similique impedit. Excepturi ab ipsum expedita fugiat expedita impedit debitis velit. Ut doloremque porro ratione eaque. Ipsa aut nihil nesciunt harum commodi. Necessitatibus ipsum saepe. Cum quos vitae eum qui. Unde suscipit in. Dignissimos quo architecto earum voluptate corporis dolorum. Quas sed eveniet dolore vel incidunt natus. Cumque voluptatibus quae. Eum facilis reprehenderit consequatur. Dolorum nobis possimus impedit aliquam velit. Porro nemo perferendis laborum dolore voluptatibus. Odit labore temporibus amet officiis exercitationem. Tempore quis praesentium atque eaque sed asperiores incidunt similique. Amet nisi cupiditate doloremque. Fugit officiis dolores illum repellat tenetur sequi molestiae illo.

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