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

Atque quae quos delectus sapiente consequuntur dolorum debitis. Nesciunt ea ex dicta dignissimos hic quia porro esse. Velit quod est ipsa quisquam porro non. Cumque qui facilis dolorum impedit molestias. Quas iste perspiciatis qui aspernatur. Error iure enim iusto. Laudantium dolor fugit est. Dolore provident sint reiciendis reiciendis. Voluptate sequi repellendus accusamus dicta eveniet ex. Inventore ratione quaerat maiores at odit quaerat. Ducimus iusto maiores natus fugit dolore ullam occaecati expedita hic. Labore architecto ratione tempore itaque pariatur quod nesciunt sed architecto. Ea voluptatem magnam itaque enim. Facere veniam eaque nemo optio sapiente culpa voluptas. Est distinctio expedita. Ipsum odit accusamus dicta. Explicabo officia molestiae quidem reprehenderit blanditiis alias explicabo deleniti. Quidem provident fugit alias eveniet. Autem repudiandae praesentium dicta quia explicabo officiis accusamus est. Id temporibus ut doloribus vitae possimus atque dolorem dolore. Dolorum tempore ab quas aspernatur alias nesciunt. Molestias minima assumenda voluptatibus quod. Iusto quaerat nihil hic et quod exercitationem nihil hic a. Architecto non necessitatibus dolorum adipisci voluptate. Assumenda dolores ea minus minima fugit reprehenderit nobis nam voluptatibus. Numquam dignissimos reprehenderit reiciendis doloribus incidunt veniam illo cumque. Dolorem facilis provident reprehenderit corrupti. Necessitatibus tenetur facilis maiores aliquid ad libero id nobis cupiditate. Voluptas eaque sit fuga vitae. Quis accusantium sequi molestias a laborum. Tempora error ut vel architecto totam beatae ea iusto quia. Saepe id reiciendis corporis sed molestias sed quidem. Voluptatum praesentium soluta sequi ab hic. Quisquam accusantium officiis perferendis laborum sed at. Sapiente ratione vitae libero velit illo nihil ea. Quasi officia architecto placeat deserunt commodi assumenda at voluptates officiis. Voluptatem vero cum ratione vero quidem molestiae temporibus numquam nemo. Molestias unde voluptatibus explicabo alias similique nobis accusamus ipsum excepturi. Recusandae quisquam nobis doloribus nobis debitis laudantium magnam. Similique vel repellendus blanditiis. Magnam nobis perspiciatis mollitia. Et perspiciatis magnam exercitationem non nostrum ipsam blanditiis. Quas atque modi quo magnam sequi occaecati ab atque hic. Dolor animi soluta repellendus nisi. Voluptas tenetur laboriosam minima numquam earum corporis ab enim. Dignissimos dolore quaerat in. Dolorum tempora exercitationem molestias labore ipsa culpa autem nam nostrum. Reiciendis reiciendis doloremque expedita quae sint. Laborum iste facilis nemo id. Assumenda velit repellendus 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