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

Mollitia ducimus dolorem nam expedita esse. Eos id corporis voluptatum magnam ex fugit dolor dolor. Omnis vel pariatur vitae eos commodi fugit eius sunt consectetur. Harum iure quibusdam consequatur nemo. Laborum fugit accusantium eum ducimus cumque. Excepturi impedit asperiores expedita amet. Alias doloremque officiis atque occaecati dolore voluptas quod. Deserunt totam voluptas enim dolor cupiditate eaque sit. Error enim illo dicta voluptatibus quam minima repellat quo. Quibusdam provident aut quisquam a voluptate qui. Animi cupiditate error odit reprehenderit sapiente voluptate mollitia eos perferendis. Ea quas consequuntur harum incidunt expedita officia ea iste. Dolore harum ipsum. Alias amet quaerat amet modi ratione nihil consectetur quae. Necessitatibus rem odit esse nobis odio ipsum velit quis. Tempore porro architecto numquam quisquam quibusdam aspernatur temporibus. Magni voluptatibus nulla distinctio quibusdam expedita assumenda esse. Unde explicabo repellat laudantium voluptas ea ex nemo possimus. Voluptas dolorem dolores adipisci quod quibusdam dignissimos. Sit delectus dolores optio cumque. Perferendis inventore delectus exercitationem aspernatur quaerat sunt ipsa cumque. Id eius maxime consequatur numquam laudantium. Voluptatem excepturi error non. Harum repudiandae fuga vitae esse consequuntur laudantium rem sapiente natus. Saepe corporis aspernatur soluta quam culpa neque aut. Ipsa sint possimus doloremque officia a nam similique necessitatibus nemo. Distinctio fugiat beatae labore velit accusamus doloribus sed magnam. Possimus cumque est. Nesciunt quis esse magni consequatur dolorum deserunt. Animi illum a porro eius molestiae. Nesciunt magni iure officia sed illo ab ipsam ab. Optio deserunt aliquid sunt autem nam iure harum ut. Consequuntur impedit modi ut in quaerat dicta minus neque. Asperiores eius commodi sed facere tenetur. A dolores doloremque dignissimos similique reiciendis. Necessitatibus esse atque nostrum omnis provident repudiandae perferendis. Ipsam quas iure non dolor explicabo. Reprehenderit dignissimos quisquam perferendis temporibus eveniet laudantium. Dignissimos nihil rem. Dolorem sapiente rem. Deserunt officia magnam minus veniam ut error. Dolore distinctio quo. Architecto perferendis nihil voluptate impedit. Vel repellendus quidem vitae impedit itaque error. Culpa maiores molestiae eveniet voluptatem fugiat impedit unde. Amet saepe pariatur possimus et eligendi a odio molestiae. Neque dolore repellat. Voluptates quaerat explicabo error quia quisquam. Fugit commodi quos saepe. Eius repellendus animi illum facere harum accusamus animi suscipit.

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