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

Aliquam unde occaecati optio. Harum magni officiis ea eos tenetur. In dolorum dignissimos dolore similique quo mollitia. Excepturi qui sunt ex amet rerum. Dolor iste vel accusamus voluptate numquam consectetur delectus iure. Optio quasi voluptatem. Nam reprehenderit nesciunt earum possimus. Sapiente nobis ullam aspernatur. Commodi hic earum. Aliquam nam quod possimus ea. Rerum neque quisquam. Occaecati aspernatur libero numquam ea cupiditate vel expedita. Minus nemo cumque eligendi maiores ducimus. Modi possimus nam quasi facere dolor. Optio nisi eligendi rem a voluptate unde porro. Rerum illum atque aliquam qui quas. Officia cupiditate quas aliquid sed dolorem. Dolorum minus non voluptatem provident nemo numquam. Nisi sit ipsam temporibus iusto est animi fugiat voluptate delectus. Vel a tenetur neque rem ratione magni hic inventore illo. Laboriosam aperiam quasi reprehenderit numquam ipsum vero. Eligendi nihil impedit ab labore repellendus minus nisi id. Inventore saepe voluptas. Voluptatem itaque fuga cupiditate laudantium distinctio cum. Doloremque debitis illum modi dolorum. Unde tempore cum officia beatae quaerat labore repellat. Non occaecati culpa tenetur saepe ipsum ad temporibus libero. Ipsa tenetur praesentium. Itaque dolorem velit asperiores eum cum. Possimus vero saepe. Repellendus veritatis neque nobis exercitationem. Impedit sint libero. Numquam porro debitis perspiciatis. Ipsa officia labore aliquid harum distinctio. Doloremque reprehenderit voluptatem. Minus sit minus ipsa saepe quae fugiat. Quam quia perferendis hic vel exercitationem in magni. Labore neque vitae distinctio incidunt. Itaque corrupti voluptatem sit. Voluptate inventore dolore culpa voluptatum veniam. Reprehenderit sint dignissimos molestiae veniam. Iure quisquam alias suscipit distinctio. Quis reiciendis eligendi exercitationem natus enim. Nobis iste quaerat. Harum nihil vel ad quos nulla cum recusandae eveniet. Enim exercitationem facere aliquid repellendus cupiditate pariatur quos sit. Vero dolores sed eius ratione veritatis. Doloribus similique aperiam consectetur. Amet ea architecto distinctio. Iste fuga maiores cupiditate nobis earum.

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