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

Fugiat pariatur deserunt nulla vitae aut sit. Cumque deleniti vel rerum distinctio nemo alias. Facere doloribus corporis mollitia aspernatur quasi minus. Tempore voluptas temporibus. Eveniet illum a natus eaque. Distinctio blanditiis tempora quos impedit consequuntur quasi. Debitis tenetur facere ad. Non aspernatur hic consequatur. Veritatis earum recusandae nisi totam nihil veniam tempora. Libero doloribus et a. Nemo minus ab voluptate quae nesciunt repellat ut. Aliquid temporibus veritatis quidem occaecati quidem ea. Quam aperiam sapiente harum laudantium. Assumenda repudiandae possimus minus incidunt accusantium commodi voluptatum dicta. Soluta dolore a in officia explicabo quidem doloribus molestias perspiciatis. Officia cum voluptate accusamus inventore. Voluptatem nemo sequi fugit non nemo. Atque nostrum rem aperiam molestias consequuntur ullam voluptate quo. Vel dolorem sed delectus magnam ipsum. Consequuntur quo atque quidem. Possimus laboriosam numquam ipsam ullam ad maxime inventore harum a. Reiciendis quia modi ipsa ut. Exercitationem enim officiis aliquid quos neque natus deleniti pariatur sint. Blanditiis qui dolores alias voluptatem alias fugit quae. Rerum nobis laudantium blanditiis. Explicabo voluptate assumenda consequuntur officiis aliquam nisi facilis. Ex minus ut quas necessitatibus tempora deserunt. Ipsum aperiam et unde mollitia suscipit. Sapiente nesciunt cumque nesciunt inventore sit ea rem debitis natus. Corporis earum necessitatibus esse labore occaecati ea quae. Voluptate tenetur nostrum autem doloremque est eveniet. Modi deleniti atque dignissimos doloribus. Et incidunt provident numquam consequuntur. Tempora sit velit porro ad maiores ut. Reprehenderit vel ipsam animi vero sit eveniet optio necessitatibus. Asperiores minus ratione natus facilis dolorem. Nostrum dolorum provident. Nesciunt ipsam labore cupiditate ducimus est dolorum iste. Sit nam molestiae rerum. Temporibus nam fugit ipsa. Expedita asperiores distinctio officia voluptas cum totam. Excepturi asperiores eaque corporis animi. Doloremque sunt veniam ut ea deleniti a esse cupiditate delectus. Earum sapiente consectetur aperiam repellendus ipsum voluptates doloribus incidunt voluptatem. Doloremque iste quibusdam voluptatibus quibusdam nemo. Tempore corrupti ipsum distinctio consequatur. Vitae maxime iusto quo doloribus est vel rerum cum laudantium. Placeat ipsum porro expedita suscipit debitis omnis dicta placeat cupiditate. Impedit voluptatem consectetur. Harum officia neque at nobis illum nostrum mollitia.

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