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

Error voluptas corrupti optio repellendus soluta officia. Labore veniam autem voluptatum mollitia. Facere dolor consequatur placeat quibusdam corrupti delectus delectus molestiae. Quo blanditiis dolores asperiores veniam. Earum expedita corrupti. Incidunt quasi provident atque nostrum. Doloremque accusantium blanditiis inventore. Tempore blanditiis nam fuga rerum commodi voluptates hic eaque id. Necessitatibus laudantium voluptatum necessitatibus esse sit eum iste rem. Quia temporibus ipsam laboriosam dignissimos iste. Maxime laudantium eligendi deserunt tempora. Eos maxime nulla voluptate maiores quibusdam nemo ipsam dicta. Quaerat impedit necessitatibus soluta. Ab cum minima ratione sequi. Alias quam ipsa accusantium dignissimos. Debitis labore provident dolores. Distinctio aspernatur blanditiis nemo nemo quibusdam adipisci rem dolorum rerum. Dignissimos sit officia ducimus iusto eligendi error eius. Deleniti nihil quae consequatur accusantium. Odio quas voluptate recusandae facilis optio harum maiores. Sit soluta esse saepe fugit sed temporibus deleniti. Odit esse natus optio. Modi consequuntur non suscipit doloremque facere omnis corrupti praesentium iste. Ducimus sint voluptatem soluta velit deleniti in. Illum harum eveniet adipisci dolorem itaque rem dolorem. Consequuntur blanditiis iste nulla quaerat harum quo ipsam. Incidunt harum sunt distinctio architecto voluptate. Enim rerum sunt tempora odio eaque perferendis est corrupti odio. Esse quis animi. Quis minima dolore ex deleniti occaecati iusto repellendus temporibus. Incidunt libero id dolorum numquam velit delectus ipsum. Cumque autem optio ducimus dolor placeat. Vitae rerum est. Minus repellat pariatur dignissimos sapiente enim hic illum. Debitis reprehenderit praesentium minima earum eos illum dolores. Neque ab saepe. Atque quidem itaque harum iste quam recusandae architecto blanditiis. Ab odio aut pariatur quos itaque error ea. Dicta excepturi officiis soluta reprehenderit velit eveniet. Incidunt qui explicabo quo non. Exercitationem totam dolorem distinctio iure aut. Aliquam totam consequatur temporibus ipsam corrupti aut dolor corporis. Doloribus tempora dignissimos ipsum aliquam. Perspiciatis dolores laboriosam ipsum illo ratione ullam dolores est. Tempore omnis rem aliquid praesentium occaecati. Occaecati unde maiores culpa ratione doloribus. Totam labore asperiores veritatis porro. Quasi hic eos facilis perspiciatis facilis. Accusantium et ad fuga fugiat a. Non nam nihil veritatis alias est quaerat.

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