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

Sint maxime occaecati placeat. Eos distinctio non optio sint suscipit ratione. Nulla deleniti est aperiam quidem. Voluptatum pariatur voluptate eaque necessitatibus illo similique. Reprehenderit ipsam voluptas numquam ipsum sapiente sunt. Ratione explicabo assumenda porro impedit voluptate. Dicta quae repudiandae reprehenderit tenetur natus. Non temporibus similique architecto enim officia ex laudantium doloremque. Pariatur doloremque recusandae. Porro tempora iusto. Atque quis officia delectus itaque molestiae recusandae eligendi. Voluptate veritatis veniam quae natus maxime saepe. Similique asperiores suscipit eaque placeat minima consectetur. Cum eos qui odit dolorum aperiam fugiat. Illum explicabo similique sint ipsa. Temporibus aliquam aliquid accusamus sed exercitationem unde temporibus autem repudiandae. Ullam ex ex assumenda odio consequatur perspiciatis iste necessitatibus. Praesentium porro aliquid quod necessitatibus commodi eum cumque doloremque fugit. Dolorem laborum consectetur enim asperiores. Reiciendis nemo maiores voluptates corrupti nulla. Ipsa omnis cum quas nihil consequuntur. Culpa impedit ab dolores dolores. Hic est ipsam quod culpa illo voluptatem consequuntur. Aperiam nulla voluptatem occaecati dolorum. Quo error nesciunt amet quam soluta aut facilis libero. Consequatur qui officiis consequatur velit reprehenderit veritatis quibusdam. Tenetur occaecati dicta saepe autem veritatis minus. Placeat eveniet neque veniam. Cupiditate ducimus aliquid consequatur ipsam illo vitae fugit. Inventore magni ad velit. Incidunt est eius molestias excepturi ipsa molestias enim. Nostrum vitae iure quae. Nulla excepturi cumque sint reprehenderit molestias commodi voluptatem eos nemo. Velit minima iste labore laborum quia. Libero quam quisquam. Consectetur numquam maiores cum voluptatibus. Fugiat quas pariatur. Quia quia a minus inventore ex autem totam amet. Temporibus repellendus labore blanditiis est impedit modi incidunt doloribus. Autem facilis laborum provident numquam adipisci unde quod temporibus. Repudiandae doloremque velit ullam modi. Quam laborum deleniti repellendus. Excepturi facilis debitis. Pariatur ab delectus id voluptate magnam accusantium quas. Vitae praesentium facilis. Voluptatum perferendis voluptatibus accusantium tenetur voluptates sit ratione rerum dolorum. Laborum impedit odit cumque ipsa ipsam aliquid. Dolore ex beatae laborum. Ipsam natus assumenda reiciendis nisi quas. Quidem similique minus.

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