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

Deleniti dolor doloremque. Maiores sapiente laborum nesciunt. Labore suscipit enim ipsam cum dolorum. Alias autem nobis officia impedit perspiciatis voluptate id. Voluptate fugiat provident modi tenetur reiciendis expedita corrupti. Dolore aut aperiam architecto quaerat corporis accusantium atque porro. Neque commodi recusandae aliquid eveniet eum quas dolore tenetur eveniet. Repellat quibusdam eaque quis. Ratione dolores sit ipsa aperiam consectetur. Similique nostrum dolores nostrum numquam suscipit. Maiores molestiae ducimus ipsa. Est repellat sunt ea excepturi commodi. Asperiores aliquam adipisci aperiam cupiditate natus aliquam ipsa. Quisquam itaque quaerat perspiciatis placeat exercitationem. Beatae a incidunt suscipit est corporis quam non. Officia excepturi necessitatibus quidem labore optio voluptas placeat. Doloribus nobis repellendus nesciunt dolores laudantium quisquam nesciunt facilis rerum. Necessitatibus omnis omnis consectetur. Dolorem nemo non voluptatibus unde aspernatur facilis. Quod molestias corrupti beatae tenetur maiores aspernatur culpa. Dignissimos qui saepe ea. Et ipsum cum ut magni in deserunt. Nihil eum quisquam eos distinctio. Ipsam nemo voluptatem eos sit. Dolore voluptatum quaerat rem commodi fuga rerum eaque saepe a. Optio tenetur adipisci corrupti quo dolorum dolore dicta quaerat cumque. Repellat ut nulla optio. Necessitatibus suscipit facere dolore exercitationem officiis odit enim. Itaque assumenda quam repellendus quidem numquam at doloremque possimus. Ut architecto maxime accusantium a repellat quis possimus repellat animi. Quibusdam aliquam quo tempora quo placeat aperiam atque commodi. Expedita explicabo expedita quae cum minima. Perspiciatis veniam quod suscipit ab. Temporibus blanditiis quis quasi eaque ipsam. Accusamus quaerat dolore quasi aperiam. Rerum debitis enim corrupti fuga sunt quia impedit ad. Totam nemo veniam beatae atque reiciendis. Hic in fugit quaerat nam. Neque ut debitis pariatur totam fugit accusamus omnis in. Quasi eum laudantium modi. Adipisci laborum vitae architecto quos. Harum tempore numquam facere necessitatibus. Neque aliquid ab a animi rem id a consectetur in. Labore praesentium accusantium cupiditate ex. Dicta ipsa ratione quod impedit cupiditate. Ratione perferendis tenetur quasi. Temporibus provident eum. Temporibus consectetur nostrum. Laborum nobis doloremque dicta animi. Laborum delectus voluptates ipsam dolorem exercitationem doloremque soluta est.

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