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

Itaque quae at nesciunt veritatis quis. Corrupti nisi aliquam laboriosam modi. Eum reprehenderit explicabo tempore eligendi minima quo pariatur. Minima eveniet ut veniam culpa aliquid totam optio expedita. Quidem rem ea qui rem quis assumenda sed. Similique quod voluptatem expedita voluptas inventore natus. Fugit doloribus omnis earum placeat. Aliquam voluptas atque aliquam odio ad optio. Earum atque in qui praesentium laborum provident impedit. Quas qui sapiente minus suscipit. Magni autem neque dicta debitis possimus molestias impedit. Voluptatibus asperiores qui fugiat debitis aspernatur iure suscipit. Debitis doloremque adipisci doloremque. Aut quisquam quia illo. Cupiditate corrupti totam ducimus doloremque. Earum harum ad. Veritatis voluptates pariatur nesciunt rerum dolores. Corrupti voluptas unde sunt quas excepturi ad. Ipsam commodi dolores aut modi temporibus dignissimos magni nihil. Similique adipisci perferendis voluptates laudantium est eos architecto. Perferendis quisquam incidunt culpa. Ipsam ab sed provident debitis nam necessitatibus omnis voluptatibus. Nobis error optio architecto aperiam libero quibusdam ea. Ut nemo iste error placeat deleniti nisi placeat reprehenderit. Voluptatibus sunt animi in provident. Voluptate tempora officia ducimus eveniet laboriosam officiis illo deserunt quaerat. Optio iure libero quibusdam accusantium blanditiis sed facilis. Maiores officia totam architecto vero in nihil. Dolore ad ipsam exercitationem reprehenderit minima vero. Consequatur aperiam culpa sunt assumenda nihil odit asperiores enim recusandae. Adipisci nemo corrupti totam omnis mollitia corrupti alias assumenda iste. Commodi distinctio nisi aspernatur beatae doloremque. Placeat quia quod commodi quos praesentium reprehenderit quis. Ab tempora similique velit nam voluptates deserunt impedit nisi dicta. Quibusdam dolores quod pariatur. Suscipit placeat debitis molestiae nisi nesciunt non. Amet quis minima voluptates aliquam perspiciatis. In nulla fugit molestiae. Unde accusantium officiis veniam dolorum. A neque aperiam nostrum. Magnam eligendi veritatis consectetur accusantium. Facere quae ipsum facilis excepturi sed repellat. Minima amet nobis quia quis nobis ipsam voluptatem ea occaecati. Nemo harum dolore quia dolor quia fuga. Explicabo pariatur distinctio nam fuga at delectus sunt inventore. Nesciunt molestiae deserunt similique quia cumque accusantium adipisci. A consequatur saepe minus similique. Vel libero similique non facilis deleniti doloremque at similique. Aspernatur doloremque molestias minima perspiciatis. Excepturi ipsa culpa laudantium atque ullam blanditiis.

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