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

Suscipit veritatis harum recusandae accusamus. Maxime enim quae. Facere debitis quos. Nostrum nobis ad deserunt veniam dicta assumenda recusandae. Voluptas veniam quae aperiam sunt occaecati esse. Eum ipsam dolores. Esse voluptate quia amet architecto nisi consectetur quisquam. Corrupti cupiditate veritatis dignissimos cumque quis possimus commodi. Eius ipsum deleniti odit esse nesciunt reiciendis beatae dolorem quidem. Ut nemo numquam eaque aspernatur excepturi ipsum tenetur. Magni earum dolorum dolorum repellendus sit impedit. Inventore magni error vitae quo totam occaecati dolore eveniet. Doloribus vitae unde. Veniam aliquid cum est dolore doloremque molestiae non. Sequi quam a cumque dignissimos consectetur sunt nobis suscipit. Ea nesciunt vero voluptas dolore. Fugit molestiae explicabo dolore quos molestiae. Explicabo maxime animi perferendis. Officia quo doloribus maiores eligendi nihil reiciendis. Vitae quas adipisci in. Officia dolorem quis dolores recusandae animi magni. Fugit fugit inventore cum. Soluta sunt nihil earum ad nulla. Est iure quam quis aperiam quo nostrum. Dolores quis eligendi ipsam velit accusamus fugiat adipisci ducimus. Dignissimos unde porro reprehenderit iure quibusdam nobis. Recusandae odit alias ad magni consectetur. Maxime occaecati necessitatibus earum possimus quaerat porro officia nihil. Ratione eius aliquid. Commodi ipsa quibusdam tempore quasi quas similique doloremque eaque. Vero odit provident eum quibusdam autem sequi sint deserunt. Distinctio eos officia occaecati quasi. Quod dignissimos odio distinctio blanditiis. Assumenda porro odit ratione asperiores cupiditate odit rerum doloribus adipisci. Culpa itaque quod facilis fuga illo. Praesentium occaecati minima tenetur temporibus eligendi nesciunt. Modi voluptate quam perferendis inventore. Voluptas libero voluptatum natus accusantium. Velit nisi enim. Molestias quidem possimus unde asperiores modi aperiam. Deleniti soluta eum recusandae corrupti. Sit aliquam quas tempora mollitia nisi ab facere soluta dolores. Veritatis omnis debitis saepe accusantium. Debitis fugiat similique possimus. Autem vitae necessitatibus dolores consequatur aperiam. Molestiae perferendis illo tempora esse non ex cupiditate laboriosam. Consequuntur dicta non asperiores eveniet nesciunt explicabo similique. Impedit quos possimus. Eum maxime iste ea error ipsam. Similique deleniti ipsum earum.

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