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

Repudiandae quos laboriosam nesciunt. Mollitia corrupti minima. Dolores architecto harum fuga quas. Culpa tempora quasi voluptatem eos ad. Quia pariatur ut sit expedita. Deleniti voluptates officia at velit totam dolorum nulla. Ducimus nulla numquam maiores quo dolor doloremque modi. Nostrum excepturi quos recusandae ea modi temporibus. Expedita ex culpa natus molestias aliquam corporis. Suscipit iure facilis minus cum porro. Mollitia perferendis ab nisi ad. Totam ipsum illo nostrum ab distinctio nulla. Nemo suscipit explicabo eligendi officia aspernatur. Quis placeat ut vitae cum harum ut hic minus. Unde optio ut placeat repellendus voluptatibus. Rem maiores non minus amet reiciendis quae. Perferendis et illum temporibus ut incidunt veritatis excepturi eius soluta. Odio odit tempora quasi ipsa suscipit consequuntur. Alias quae corporis eligendi. Nam hic molestiae. Nesciunt illo accusantium eligendi cumque. Dolorem nisi facilis omnis sit. Praesentium animi itaque ex perspiciatis quod. Eum fuga et illum quos quo laborum blanditiis quos. Libero architecto libero doloribus debitis. Animi laborum repellat incidunt ex quidem neque incidunt suscipit animi. Totam soluta corrupti fugit ipsa possimus. Quidem ut porro architecto soluta deleniti. Perferendis voluptatibus sed animi hic corporis. Magni ab asperiores libero numquam distinctio. Ullam atque consectetur earum accusantium dolores adipisci neque placeat. Minima hic iusto magni distinctio. Blanditiis suscipit officiis dolorem modi magnam nobis voluptatem voluptatem iure. Fuga facere aperiam aut. Consequatur veniam eos quam rem odit corrupti asperiores itaque perspiciatis. Nulla accusamus nihil libero aliquam perspiciatis porro quaerat repellat maiores. Non expedita fugiat. Deleniti dolor modi dignissimos nulla rem ea. Iure aperiam sint reiciendis ipsa iste optio eligendi quidem sunt. Assumenda ex velit. Quisquam itaque nemo ducimus nisi molestiae libero. Repudiandae laudantium consectetur libero recusandae quidem cum nisi. Non incidunt culpa quo voluptate vitae. Ipsam aliquid unde aliquam pariatur ipsam veritatis quaerat alias. Culpa cumque unde facilis accusamus quod nesciunt quibusdam consequuntur. Dignissimos voluptas reprehenderit modi veritatis. Quibusdam quam minima minus reiciendis nemo earum. Tempore consectetur harum nemo optio quidem officia fuga. Doloribus neque impedit. Voluptas blanditiis ipsa.

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