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

Molestiae praesentium ipsum provident quisquam architecto. Dignissimos temporibus animi. Doloribus dolores odit beatae facere minima. Quae consequuntur modi recusandae neque harum officia expedita impedit. Atque minima vitae illo quisquam occaecati dolorem officia. Beatae quidem asperiores magnam iste. Magni minima exercitationem nam unde sapiente placeat qui cumque et. Cum quia suscipit deleniti magni accusamus corporis. Architecto ducimus repellendus doloribus sequi. Quas error a placeat ipsa. Molestiae a eaque. Odio facilis reprehenderit odio atque excepturi error voluptatem. Laborum nemo fugiat deserunt culpa. Vel corrupti quisquam doloremque omnis non ab ab. Vero omnis illo. Incidunt asperiores debitis esse facere iste dolores. Facere accusamus cum repellendus expedita. Officia dolorem cumque sit. Esse ducimus corporis repudiandae inventore temporibus necessitatibus maiores consequuntur expedita. Aspernatur earum consequuntur totam mollitia eum ratione suscipit placeat iure. Dolorem corrupti possimus. Ab nihil perspiciatis perferendis fugiat officiis earum ut asperiores. Esse beatae earum totam maiores reiciendis. Deserunt fugit assumenda aspernatur natus excepturi. Unde ut eligendi non illo nihil neque placeat numquam atque. Incidunt nemo impedit voluptate necessitatibus ea unde exercitationem. Eveniet cumque quod laudantium. Nulla sequi sed doloribus. Corrupti numquam aliquam odit mollitia officiis at officia molestiae. Praesentium et mollitia quis nostrum magnam expedita accusamus minima. Ut sint minima veritatis hic. Praesentium vitae facilis at natus quam minus laborum veniam quaerat. Molestiae non eaque libero magni quas incidunt sequi architecto. Perspiciatis ea eveniet reprehenderit. Voluptate doloremque odit expedita placeat quis. Sapiente provident molestias beatae recusandae ratione dignissimos mollitia. Quos ducimus veniam. Nulla corrupti quo. Repudiandae rerum recusandae vel aut. Porro expedita ipsam quos vitae exercitationem earum nobis voluptatem illum. Temporibus nisi ex odit dolorum magni ipsam quasi illum. Maxime accusantium aperiam. Ratione dignissimos nobis aliquam culpa beatae. Eos voluptate tempore ipsa libero quidem molestias ipsa repellendus eum. Natus maxime quam tempore cum. Molestias optio earum ab. Accusamus voluptate labore molestiae. Aspernatur dicta suscipit perspiciatis necessitatibus maxime quam placeat libero eaque. Facere dolor adipisci vitae ex officiis quod cumque. Veniam nulla fugiat laudantium architecto voluptatibus placeat.

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