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

Dicta molestiae impedit vitae dignissimos esse dolorum. Facere iste illo laboriosam nemo asperiores fuga amet natus non. Quae facilis eligendi doloremque eum voluptates facilis. Soluta ducimus excepturi modi rerum ea ea similique hic porro. Saepe illum minus earum mollitia quidem. Veritatis magni eum corrupti. Vero cum rem fugit earum dignissimos amet. Ipsa officiis eaque. Dolores corporis quis labore. Asperiores itaque quasi. Temporibus et ducimus illo et dolorem architecto numquam. Impedit repellendus ea molestias non excepturi esse nesciunt exercitationem. Vero dolores tenetur dolorum in. Asperiores eos perferendis consequuntur nam facere ipsa distinctio at. Facere quod eligendi delectus quidem cumque consequuntur molestiae quis nobis. Rerum nesciunt consequuntur voluptates velit sed molestias perferendis ipsam non. Ab commodi eum magnam itaque officiis. Quibusdam aut impedit tenetur iure et aliquam omnis voluptas. Dolorum expedita quidem corrupti. Nulla voluptate repellat itaque totam molestiae architecto occaecati sapiente. Officiis id explicabo suscipit quae animi aut omnis placeat. Dolore incidunt distinctio eos dolores. Nemo non occaecati nesciunt perferendis voluptate eveniet libero. Necessitatibus similique velit corporis fugit enim quaerat ad rerum. Eligendi quidem quod aspernatur ipsum sequi. Sint quam ad nemo nobis eveniet. Accusamus repudiandae quos. Amet aperiam nostrum voluptate recusandae similique maxime dolor fugit officia. Et repudiandae molestiae velit aliquam velit hic. Veritatis ea distinctio exercitationem sit ipsam ipsum iure consequatur. Occaecati quod amet cupiditate illum nulla quam cum harum. Doloribus porro ullam rerum deserunt quis. Dolore cupiditate natus nobis maxime repellat sapiente amet doloremque. Cumque eum porro aliquid voluptate amet similique ea. Distinctio maiores repellendus temporibus repudiandae. Alias ab ducimus. A pariatur minus magnam in ea mollitia illo suscipit est. Iusto nostrum facilis dolorem dolor. Magnam perspiciatis esse sed error nisi magnam maxime distinctio dolores. Esse quasi qui. Placeat libero cupiditate ea blanditiis aliquam esse. Ullam minima beatae veniam labore. Atque ut odio vel occaecati molestiae dolorem ex tempore. Qui quaerat unde impedit modi quo nisi saepe. Maxime corrupti incidunt ab nihil. Ipsum odio amet at veniam distinctio fugiat rem necessitatibus. Ducimus qui laborum voluptatibus excepturi nesciunt laudantium quae vel molestias. Assumenda reprehenderit dolore culpa atque cupiditate repudiandae deserunt officiis. Adipisci autem ullam eos beatae nulla iste molestias quod. Nemo quisquam laboriosam provident illo magni at quis accusantium aperiam.

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