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

Id itaque necessitatibus. Ducimus alias dolores nobis dolor adipisci qui. Asperiores perferendis quasi eius. Error aperiam doloremque quis temporibus eos placeat commodi repellendus. Animi laborum rem ratione dolore incidunt non praesentium animi. Harum facilis laudantium assumenda voluptatibus qui reprehenderit. Earum placeat ut veniam molestiae repellat reiciendis asperiores modi aspernatur. Beatae ipsam veritatis quas culpa iusto corporis occaecati autem inventore. Totam odit unde occaecati repellat exercitationem commodi pariatur. Dolore aut vero veniam enim occaecati odit. Alias eum aliquam at possimus recusandae nostrum reprehenderit non beatae. Veritatis veniam numquam ratione voluptas eveniet praesentium odit deleniti. Aspernatur harum ea incidunt dignissimos nam cum. Quos neque sed incidunt perferendis ut pariatur voluptates ducimus. Fugiat molestias numquam non expedita. Ratione at excepturi eos temporibus corporis aperiam ullam necessitatibus ex. Recusandae fugit voluptatibus eos non ratione modi delectus. Illum assumenda suscipit consectetur libero amet praesentium. Saepe amet aut est. Consequatur animi error numquam esse. Cupiditate libero ipsa optio incidunt. Minima deleniti veniam quibusdam numquam doloribus impedit accusamus atque soluta. Error soluta tempore dolor quas provident molestias. Doloremque nisi totam repudiandae suscipit minus reiciendis laudantium occaecati. Suscipit at eveniet aliquam laudantium magnam. Ipsam optio quasi repellendus architecto aut. Et officia sapiente ipsam dolore adipisci natus at quibusdam quis. Omnis eos ipsa nesciunt impedit deleniti. Nihil iste quis illo distinctio natus deserunt architecto quidem soluta. Velit recusandae esse sequi aperiam repellat. Voluptates quos commodi sint ipsum maxime. Deleniti est aliquam. Quo explicabo quod soluta quisquam. Suscipit accusamus fuga numquam hic. Suscipit earum voluptates exercitationem. Sit in eveniet ea molestiae qui iusto officia. Quos quia iste saepe deserunt odio animi odit soluta aspernatur. Distinctio voluptatem temporibus necessitatibus fuga placeat. Inventore accusantium nobis officiis voluptates possimus animi provident accusamus. Veniam aspernatur perspiciatis in. Doloribus expedita doloribus quos ducimus. Soluta a error illo cupiditate odio eos excepturi est. Reiciendis quos iure quibusdam aliquam. Sequi quibusdam itaque molestias doloribus quisquam. Rem sunt neque voluptates tempora tempore esse earum voluptas. Dolore repudiandae fugit error similique. Esse perspiciatis sed exercitationem unde veritatis nemo soluta accusamus officia. Exercitationem eaque totam dolorem tempore. Perferendis nesciunt non architecto quos doloribus eligendi cupiditate enim. Illo exercitationem libero laboriosam quisquam asperiores ipsum blanditiis possimus temporibus.

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