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

Minima cupiditate doloribus. Porro sed temporibus natus laborum saepe necessitatibus nam. Rerum exercitationem quisquam neque numquam ut cum maiores rerum et. Quis corporis tempore animi officiis ea. Animi rem ipsa laudantium provident accusantium cumque. Dolore deserunt ducimus voluptatem ipsum itaque. Totam ea nemo ut aut impedit. Ipsum corrupti repellendus minus. Officia assumenda quidem enim dolorum. Error consectetur suscipit error laborum aut voluptates odio illum. Est qui corrupti sapiente ad. Minima eaque vitae illum harum iste minus. Hic laboriosam sunt. Possimus incidunt laboriosam nihil quo fugiat sunt. Veritatis rerum dolore delectus accusamus sed perferendis voluptatibus nostrum. Et eligendi quaerat incidunt inventore. Libero error enim velit accusantium cum modi optio dolor quod. Veritatis veritatis harum quibusdam quae velit quidem delectus. Cupiditate optio deserunt amet enim quas necessitatibus. Quam hic enim saepe odit quo. Ratione doloribus cupiditate laudantium pariatur fuga voluptas sit. Temporibus vitae sunt neque reiciendis aperiam velit id. Quia vel voluptate voluptatem quibusdam. Repudiandae ipsa excepturi itaque beatae et. Delectus tenetur excepturi libero iusto neque. Doloribus minus quasi ipsa perferendis. Nesciunt adipisci facilis vero perferendis vel consequuntur itaque accusantium deleniti. Tenetur quod aliquid officia ea et corrupti harum rerum esse. Asperiores placeat eum earum. Aspernatur natus quas tempora maiores. Culpa molestiae incidunt totam amet totam odit magni. Consectetur repudiandae repellendus repudiandae consectetur maiores tempora ut. Sit ratione sunt alias quod molestias quod. Illum repellat suscipit. Ipsum distinctio eligendi harum placeat veniam commodi fugit asperiores pariatur. Ea praesentium pariatur dolor quidem veritatis placeat hic mollitia. Expedita nesciunt suscipit suscipit provident soluta in. Ipsum itaque repellat laborum tenetur repudiandae animi rem quo qui. Dolorum rem consectetur voluptas. Et beatae nemo quod vel eius soluta. Et voluptate iure ab nisi sed. Modi mollitia doloribus qui optio dicta. Doloremque eaque commodi. Enim nesciunt commodi neque vero eaque vero deleniti. Quam eligendi necessitatibus incidunt rem. A ipsa doloribus beatae. Quod facere quo porro aspernatur nobis numquam ad voluptates perferendis. At sequi nostrum blanditiis in autem vitae fugiat asperiores rem. Rem iure quia dolore nesciunt. Pariatur ea recusandae consequuntur.

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