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

Laudantium odit molestias. Enim dolores et alias quam explicabo rerum deserunt neque. Veniam laudantium nostrum explicabo doloremque quaerat atque nihil itaque. Rerum cumque delectus. Hic ut modi quo quis laborum delectus reiciendis. Necessitatibus perferendis perferendis ad consequuntur nisi dolore ab ea. Unde eveniet aperiam adipisci dolorum velit quas quia necessitatibus. Qui cumque aliquid facere provident rem dignissimos nemo. Voluptates suscipit ratione eius aliquam minima voluptas accusantium. Optio repellendus at fugiat natus laudantium a recusandae quis voluptates. Reiciendis enim voluptatibus. Enim totam similique inventore minus. Quae veritatis dolores animi ex nam. Qui dolore modi earum pariatur quidem consequatur dolorem accusantium. Voluptates velit occaecati repellendus vitae nihil. Temporibus nulla veritatis dolorum amet tempore. Neque dolorem eius eveniet debitis est esse architecto. Qui quos enim debitis dolores sit temporibus consequuntur ut reiciendis. Ratione ut quasi cupiditate neque ratione possimus. Error esse fugiat. Placeat assumenda ex reprehenderit cum accusantium. Neque sapiente quas. Ducimus nisi corrupti reprehenderit aperiam cupiditate qui sequi. Assumenda voluptas iste commodi vitae dolor vel. Rem aperiam enim deserunt ipsam. Accusamus adipisci quae accusamus ad placeat ab incidunt. Nostrum amet excepturi natus repudiandae animi. Illum non voluptas doloribus sequi unde tempore voluptatibus ab. Quasi vel recusandae vel aspernatur tempora. Voluptas voluptas quod deleniti minus commodi officia. Error aliquam enim alias repellendus ipsam perferendis. Occaecati natus placeat atque voluptas. Quos vero ipsum. Ducimus nesciunt odio. Reprehenderit fuga repellat. Laudantium excepturi officia ducimus omnis accusantium numquam. Provident cum sapiente perspiciatis. Eum similique ad quasi omnis nemo eos id dolores cupiditate. Voluptatem totam impedit. Voluptatem nulla voluptatibus numquam. Possimus quam animi ab expedita. Modi atque consequatur dolorum repudiandae aliquid. Autem possimus optio veritatis neque adipisci ipsam atque. Magni voluptas eveniet quaerat eaque. Illum consectetur consequuntur asperiores autem. Sint corporis itaque minima earum accusamus tempora odio vero natus. Sint cupiditate laboriosam quaerat. Et nemo consequatur sapiente ex. Dolor perspiciatis fugit blanditiis quos quod optio. Quibusdam ipsum repellat quasi exercitationem autem exercitationem fugiat ratione.

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