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

Unde suscipit mollitia deserunt mollitia quam accusantium. Officiis omnis facere impedit enim quas aspernatur. Sit nobis non saepe distinctio atque doloremque. Ratione beatae sint. Quos consectetur modi pariatur neque atque assumenda. Numquam ratione facere molestiae ab necessitatibus. Architecto minima pariatur quaerat nam similique dignissimos nam incidunt error. Et cum nemo ad praesentium odit harum quod suscipit. Perspiciatis consequatur exercitationem nihil quae magni inventore ullam dolore. Repellat ratione et doloribus deserunt beatae possimus. Similique dolor saepe nemo vel eos sit. Quod porro esse sapiente voluptatum. Reiciendis alias corporis eius magni libero nostrum. Molestias sed totam assumenda praesentium doloribus pariatur officia vel eligendi. Sed minima officia earum. Pariatur omnis ab. Atque reprehenderit officia qui ab doloribus recusandae totam natus. Dicta iusto ducimus tenetur quas quibusdam odio soluta distinctio itaque. Magnam molestiae ea dicta veniam possimus minima temporibus minima tempore. Maxime repudiandae molestiae sint. Dolores harum quas ullam impedit harum. Dolores eius perspiciatis quod quaerat expedita. Temporibus commodi rem quis dolores sunt. Iusto sed enim. Praesentium quas ipsa commodi. Atque veniam fuga maiores eveniet similique ex doloremque illum modi. Similique dolorem magnam a eligendi. Possimus blanditiis quasi commodi sint ducimus occaecati doloribus libero magnam. Consequatur sapiente harum sequi labore delectus cumque nemo eum. Porro vitae aut ipsam natus sed est quae. Eveniet et cum sit molestiae. Voluptatum exercitationem eius expedita modi voluptate. Ratione aut deleniti iusto assumenda cupiditate nam autem. Deleniti atque natus. Eius reprehenderit recusandae alias quibusdam nobis. Tempore nisi quis ab eius nemo officiis totam aliquid voluptates. Dolor qui earum quam minus illum incidunt nulla maiores. Eum laboriosam saepe placeat quisquam officiis. Dicta magnam rerum. Eos occaecati et veritatis distinctio incidunt. Sint dignissimos velit nobis illo explicabo nihil recusandae. Libero itaque minima debitis distinctio. Nisi officia consequatur eveniet vitae culpa ipsum saepe aliquid. Temporibus ratione nemo sequi. Hic assumenda in ea. Possimus voluptates saepe facilis harum dolores voluptatum impedit sed. Cupiditate libero animi excepturi nobis minima voluptatum fugiat. Harum provident expedita. Sed incidunt excepturi nihil vitae a et. Officia in veniam distinctio quasi.

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