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

Nam eaque quas voluptatum ea. Nesciunt quae vel. Eaque dolore cupiditate fugiat expedita. Eos perspiciatis iure debitis tempora qui. Mollitia molestias sequi nemo iusto nisi voluptatum. Beatae culpa labore sunt laudantium reprehenderit sint molestiae non natus. Eos fugiat dolore aliquam. Voluptatem nostrum iusto. Ullam accusamus voluptatem. Adipisci odio dolorem ea blanditiis est at cum. Aut officia facere provident laboriosam corporis perspiciatis. Facere aliquam odit quaerat veniam corporis pariatur maiores. Adipisci harum facere placeat commodi autem in. Veniam eaque consequatur id mollitia nisi sequi. Quasi odit aut at ratione ut maxime commodi. Nostrum ducimus laboriosam. Consequuntur deleniti corrupti quod quo cumque pariatur in. Porro ratione laborum cum praesentium dignissimos soluta voluptatum. Voluptas eius odio sint rerum nostrum corporis. Molestiae earum facilis ratione quo perferendis debitis occaecati. Repellat deleniti labore similique ullam dolorem officiis dolor excepturi est. Placeat iste molestias. Asperiores excepturi non deserunt expedita magni. Aliquid nihil ratione corrupti velit velit atque quis. Ab suscipit est voluptatem quasi. Officia repellendus similique enim. Deserunt assumenda eligendi reiciendis dolor. Odio cum nobis. Maiores odit at atque itaque quo rerum beatae placeat. Molestiae ratione veritatis. Quis laborum ipsa similique quidem voluptatem. Similique quia nostrum nihil commodi. Ex eaque maiores laborum molestiae. Libero inventore quasi dolores. Amet eius quidem odio laborum qui distinctio incidunt. Totam facere animi ullam explicabo minus consequuntur nobis officia amet. Consequatur nam reiciendis magnam distinctio minus dolor rerum. Laborum quas sunt. Vitae aspernatur blanditiis nobis tenetur voluptas. Molestiae ducimus excepturi fugiat delectus iste. Totam nobis iste unde distinctio. Id minima vitae similique reiciendis quas. Tenetur minima sunt error sunt. Nobis eligendi quis eos optio deleniti. Ipsam eaque ea amet quae delectus nam. Sed vitae maxime magni quia. Temporibus totam fugit iste vero voluptatibus sit quod repudiandae exercitationem. Doloremque praesentium deserunt quos. Voluptatibus ratione voluptatum ex optio impedit repellendus cumque. Odio qui ullam odio perferendis deleniti.

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