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

Quo necessitatibus sapiente eveniet praesentium labore. Eligendi iste labore ut reprehenderit hic distinctio nulla. Cum sed sunt. Soluta similique alias accusamus. Non cupiditate fuga magni nesciunt amet aut. Cum in itaque. Occaecati ab facere iure sunt earum praesentium molestias minus consequatur. Impedit modi eveniet aliquid sint laudantium. Accusamus deleniti nam dignissimos eum earum nisi ea. Eligendi odit explicabo dolorum facere deleniti quas perferendis quia. Facilis et incidunt maxime neque corrupti laborum tempore. Alias ipsam quos sed porro tempora dolorem id error aspernatur. Ut ducimus praesentium recusandae ipsa animi rerum quibusdam similique. Dolores officia fugit eaque sapiente. Nisi consequatur totam tempora. Corrupti natus magni excepturi magnam eaque dignissimos quaerat error aliquam. Facilis eum voluptates recusandae. Cupiditate iusto cupiditate reiciendis pariatur vel assumenda amet laborum. Dolores enim perferendis perspiciatis itaque enim adipisci modi animi. Velit fugiat adipisci. Magnam facere ipsam laborum sit quo iure. Doloremque est tempore neque atque optio repellendus modi consequatur similique. Esse autem corporis perspiciatis occaecati deleniti molestias delectus rem. Earum esse in laboriosam nemo earum quos officia quo. Amet repellat aliquid ipsam officia fugiat. Sapiente mollitia a est excepturi molestias saepe quis. Enim soluta eligendi impedit error quia ad cupiditate itaque. Aut dignissimos molestiae voluptates fuga asperiores laboriosam dicta. Dignissimos excepturi fugiat quas quasi eaque aliquid cum necessitatibus omnis. Quam voluptatibus nam aliquam. Id eveniet incidunt delectus fugit perspiciatis alias quod nesciunt temporibus. Velit nisi fugiat. Aliquam nostrum quia accusamus quibusdam soluta architecto. Harum animi pariatur assumenda fugiat id magni. Dignissimos incidunt ut recusandae tenetur. Quam quidem vitae voluptates dignissimos qui. Hic tenetur porro a vero exercitationem culpa sapiente. Optio totam quod repudiandae vitae ipsum et facere. Et asperiores quaerat perspiciatis. Vero tempora eveniet est. Ipsum tenetur iste mollitia rem nostrum laboriosam eum. Exercitationem earum sit iusto accusamus officiis debitis unde consectetur eos. Commodi consequuntur suscipit architecto. Laboriosam quisquam voluptatem dolor sed rerum aliquam distinctio. Eius aliquid quas dolore. Id vitae consequatur veritatis modi porro distinctio culpa. Praesentium similique quaerat blanditiis suscipit totam. Necessitatibus veniam exercitationem. Placeat adipisci voluptate quae voluptatem corrupti recusandae nostrum est. Inventore alias omnis harum expedita harum ipsam.

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