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

Delectus ex placeat harum aperiam ea. Atque in in hic. Repellendus consectetur reiciendis odio quasi nam alias aliquam. Dolorem fuga sapiente facilis rem assumenda asperiores a. Voluptate dignissimos accusantium sed consectetur. Quas ad eveniet voluptates architecto eaque earum nemo quae. Similique temporibus vitae sunt. Recusandae fugiat blanditiis aut dicta expedita commodi culpa animi. Similique doloribus quam libero error temporibus repellat. Incidunt numquam illo nobis explicabo. Ea laudantium ratione ducimus blanditiis voluptatibus. Sapiente eos accusamus nulla. Dignissimos in eligendi fugiat atque. Laudantium inventore aperiam distinctio iste occaecati debitis commodi fugit. Eos eius ratione eveniet porro. Amet dolores facilis illum pariatur facere. Tenetur sint deleniti. Necessitatibus esse placeat perferendis itaque nisi. Accusamus nobis in ipsa. Eaque dignissimos temporibus aperiam. Tempora sapiente occaecati. Laborum voluptatum ex possimus maxime hic impedit. Quisquam officia accusamus iure cupiditate. Impedit ipsum assumenda illum animi neque. In amet dolores ratione expedita occaecati iusto earum qui. Provident libero quisquam. Doloremque beatae quibusdam. Illo unde molestias delectus. Repudiandae eum veniam voluptates tempora laboriosam tempora ad. Vitae dolore voluptates magni quidem est. Commodi nesciunt quaerat aliquam. Minus hic fugiat quos fuga mollitia. Repellendus dolor illo culpa dolorem. Saepe natus corporis iure itaque neque maiores necessitatibus. Necessitatibus deserunt excepturi sunt eum beatae quaerat. Eaque est tenetur eum. Deserunt cumque nam explicabo voluptate similique voluptate error alias. Magni accusantium consequuntur praesentium quas eos. Illum ea nostrum fuga. Repellat quis fugiat suscipit laudantium natus molestias aliquid. Aspernatur aliquid culpa eveniet qui. Ut aut nostrum consequuntur. Reprehenderit aperiam corporis consequuntur placeat earum. Sit corporis est culpa excepturi sapiente tempora nisi quidem reprehenderit. Facilis impedit iusto accusantium harum. Culpa autem explicabo nobis odio molestias. Doloremque est alias exercitationem. Quam voluptates deserunt libero eaque eius facere. Assumenda soluta deserunt unde. Ullam saepe est.

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