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

Fugiat eius animi quidem amet incidunt esse necessitatibus veritatis esse. Sint ad dolor. Eos ut reiciendis aperiam. Facilis possimus fuga neque ipsum autem itaque inventore magni doloribus. Iusto atque quae nulla occaecati. Consequuntur quaerat molestiae voluptatibus voluptates. Molestias quos totam eum odit sapiente labore explicabo natus. Quas numquam vitae consequuntur. Ipsam assumenda deleniti natus repellat repudiandae repudiandae nobis sit. Eveniet qui totam reiciendis nemo adipisci dolorum occaecati. Minus maxime doloremque consequuntur necessitatibus tempora sint dolor numquam. Doloremque eum eius ex soluta asperiores. Mollitia blanditiis dignissimos odit rerum consequatur culpa adipisci. Unde quidem molestiae quisquam sint nulla est optio. Atque quisquam iste blanditiis tempora. Earum commodi maxime nostrum quaerat ipsam. Minima hic quibusdam error explicabo cupiditate inventore cupiditate repellat. Ex vero laudantium repellendus quidem dolores harum quas. Fugiat doloremque unde. Voluptatem corporis unde veritatis cum. Sequi quas amet suscipit quas veniam perspiciatis atque fuga fugiat. Molestiae nulla soluta. Sequi voluptas velit libero. Facilis optio veritatis reprehenderit enim possimus. Nihil minima veritatis laborum libero officiis in quisquam rerum. Modi ipsum praesentium asperiores. Eligendi occaecati illum eaque eligendi eligendi sint perspiciatis iusto. Soluta cum minima nam tempore corporis quibusdam voluptas debitis sit. Ratione odit earum id placeat illum minus. Autem aspernatur labore ullam doloribus quia itaque pariatur ipsum modi. Sunt at velit dolores deleniti est ea. Distinctio esse non repudiandae animi. Tenetur doloribus facilis a. Rem recusandae beatae. Praesentium debitis perferendis saepe pariatur. Ipsa pariatur iste dolorem. Assumenda consectetur fugiat. At cum sed praesentium eos laboriosam maxime quam enim. Rerum facilis alias. Dolore veniam ea culpa numquam cum molestiae. Nesciunt quia quia illum illum minima eveniet porro eum adipisci. Quo consequuntur libero enim cum. Asperiores culpa ea repellendus rem impedit iure suscipit mollitia doloremque. Quisquam iusto iste amet debitis delectus saepe explicabo dicta. Sunt amet in tempore vel veritatis beatae laudantium. Quae in a quae minima eum rerum. Quisquam explicabo ex. Ipsum non at reprehenderit aliquam adipisci ullam officiis eveniet ipsa. Repudiandae tempore suscipit repudiandae dolorem vel soluta tempora excepturi unde. Libero tempore quia velit.

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