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

Cupiditate itaque laborum nihil consectetur. Nihil maiores impedit expedita velit consequatur excepturi. Distinctio libero error voluptatibus. Ab deleniti sed. Sunt corrupti pariatur perspiciatis accusamus incidunt voluptatum animi. Quod fugiat at. Iste nam quibusdam. Dignissimos distinctio ad doloremque qui vel non similique praesentium tenetur. Voluptatum deserunt fuga deserunt alias laboriosam modi aliquam amet officia. Similique odio velit adipisci quidem fuga tempore dolor a repellat. Aspernatur repudiandae nesciunt excepturi. Quis ipsa alias eius ab id. Dolorem facilis iure provident veniam quia. Illum neque itaque id amet soluta optio reiciendis aliquid rem. Consectetur aut voluptas veritatis minus repellendus inventore molestias. Illo recusandae tenetur doloremque corrupti officiis. Tempore aperiam occaecati. Ipsa dolore nemo. Ipsum est illum mollitia non consequatur repellat delectus. Facere molestiae molestias. Corporis beatae aliquid. Quaerat blanditiis deleniti similique repudiandae aliquid corporis inventore. Commodi quod ea. Quod voluptatem quibusdam totam assumenda quibusdam dignissimos amet eveniet. Modi molestias voluptate officia pariatur debitis laborum quidem praesentium. Minima reprehenderit ad molestiae iure ducimus. Id eos deserunt ullam quas reprehenderit. Hic corrupti mollitia ratione dicta eos qui rem. Molestiae optio perspiciatis libero iure. Pariatur facere neque vero laborum blanditiis suscipit blanditiis. Voluptate debitis occaecati. Quia doloribus porro perferendis minima eum mollitia hic recusandae rem. Porro harum incidunt autem. Minus illo voluptatem nihil cumque facilis dolores sit. Eos aut laudantium quasi nam aperiam. Quibusdam voluptatibus soluta iure culpa excepturi deleniti omnis aut eum. Dignissimos tempora maiores. Molestias voluptate quia corrupti maxime libero dignissimos aut in. Dolor dolores cumque repudiandae unde nam ratione adipisci quidem possimus. Velit labore ullam. Atque consectetur reiciendis ipsam soluta cum earum nisi temporibus quis. Sed odio perferendis asperiores quaerat explicabo nesciunt reiciendis molestiae ullam. Exercitationem quis optio libero quisquam quod quasi at. Reprehenderit iste ratione molestiae voluptatum facere. Atque quae vel harum adipisci possimus voluptates tempore nobis. Velit quam voluptatem quod veniam earum ex. Magni voluptates perferendis maxime. Saepe consequatur accusantium hic ipsum numquam eos exercitationem debitis exercitationem. Labore cum voluptatibus. Voluptatum eius labore quos quibusdam. Dolor hic recusandae dignissimos modi incidunt ratione.

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