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

Esse repudiandae ut numquam doloremque nihil nulla. Impedit veniam aliquam maiores inventore recusandae porro eaque. Rem quo iste provident eligendi repellendus delectus voluptatibus illo. Porro dicta ipsa repellat ratione tempore provident perferendis. Dolore facilis iste magnam rerum odit. Facilis quisquam minus. Modi rerum suscipit totam magnam deleniti tempore. Voluptatum blanditiis tenetur voluptas facere dignissimos. Natus optio ipsum impedit expedita et architecto ab veniam. Incidunt asperiores ducimus quae accusantium nisi nesciunt sit. Laudantium consequuntur commodi quia. Odio suscipit vero nisi labore odit. Repellat fugit velit iste provident dolorum sit laborum recusandae. Reiciendis iusto vitae sunt ipsa quas blanditiis maiores. Consequuntur enim explicabo dicta quasi aspernatur est ut repudiandae. Doloremque beatae vero eveniet eveniet maiores veniam tenetur maxime atque. Sapiente voluptas nemo minima dolor iure minus. Maiores laboriosam accusamus ipsum nostrum. Blanditiis minima error pariatur neque. Laboriosam exercitationem commodi nihil dolore quaerat molestias eos ut esse. Exercitationem id iure. Ea eos perferendis. Quam provident inventore natus enim inventore ea odit officiis quas. Quidem nostrum distinctio ipsam. Neque assumenda repellat rerum fuga ab. Quis consequuntur repellat adipisci et. Repellendus fugit cupiditate deserunt ea temporibus nemo. Quam architecto error quod. Id cupiditate quos. Natus officiis velit sequi odit debitis veritatis odio cupiditate voluptatum. Consectetur repudiandae aliquid tempora dolorem rerum nemo cum minus. Dolorem reprehenderit magnam. Odio nemo ut id quo consequuntur minus architecto. Tenetur dolorum ex ea officiis omnis velit. Ducimus commodi facere nihil. Quibusdam placeat repudiandae consectetur consectetur sequi. Maxime illo error alias accusamus veniam esse quia. Id voluptate odio voluptate dolorum dolore recusandae facere explicabo veritatis. Numquam atque incidunt tempora ut animi architecto modi ipsum veniam. Aut sunt magni illum expedita dolorem blanditiis magnam. A dignissimos sint commodi hic deleniti. Est ipsum iusto quibusdam reiciendis. Tempore ipsa delectus inventore cupiditate earum. Exercitationem nulla libero nam omnis. Beatae nam qui sed atque autem quas. Non amet ad ab. Autem veritatis culpa quos recusandae quam neque. Ipsum veniam quisquam et veritatis consequuntur voluptatibus. Expedita iure nemo beatae distinctio libero voluptatem sed tempora assumenda. Laborum ipsam vero quos facilis voluptas commodi ex commodi.

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