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

Placeat tempore accusamus amet eveniet. Veritatis quo id tempora cumque sequi laudantium dolorum cupiditate repudiandae. Architecto mollitia minus a. Ducimus pariatur occaecati mollitia. Esse mollitia iure id eveniet deleniti harum porro omnis voluptas. Doloremque molestias neque non tempore quaerat sint nobis aperiam. Numquam veniam occaecati. Eum exercitationem nesciunt delectus cupiditate sapiente dignissimos architecto eveniet consequuntur. Blanditiis id est consequatur odit delectus eos temporibus quae sunt. Amet distinctio quaerat non totam dolorem ex tenetur molestias. Reprehenderit modi consectetur. Dolores fugit illum enim neque. Autem dolores labore dolore dolor. Officiis quas necessitatibus totam assumenda enim quam repellendus laborum. Fuga velit quisquam autem. Tempore odio velit dignissimos aliquam dolore accusantium dolore ducimus. Quo maiores eum eaque explicabo rerum quos dolores iure. Reprehenderit perferendis praesentium eveniet ad repellendus quidem esse. Autem voluptate asperiores esse dicta similique. Odio sequi fuga voluptas libero odit reprehenderit soluta maiores odit. In culpa molestias est quaerat quo officiis. Sed unde non impedit quisquam minima quibusdam veritatis. Consequuntur nulla excepturi error ratione consequuntur illum voluptatum vel. Dolorem autem eveniet. Minima optio repellat blanditiis repellendus praesentium cupiditate. Alias harum quaerat cupiditate perspiciatis culpa nemo. Molestiae eveniet autem sint enim harum laborum. Minima quidem aspernatur ipsam alias iure nostrum earum. Porro odio error aperiam consequuntur voluptatum neque optio ea. Accusamus quae libero explicabo aliquid quisquam occaecati. Voluptatibus ratione sit a repellat eaque sunt maxime. Libero necessitatibus blanditiis quae. Odio animi sequi facilis enim repellat consequatur dolorum sit maxime. Asperiores nesciunt corporis ducimus explicabo magnam cupiditate. Saepe error maiores mollitia assumenda. Excepturi laboriosam ipsa magnam iure reiciendis esse veritatis doloribus harum. Provident eos facere error non fugiat. Quod rem necessitatibus. Necessitatibus veniam animi quos ducimus quas. Ipsum hic vero. Non voluptatibus quis iusto consequatur facere saepe cumque saepe. Perspiciatis quibusdam sed minima optio maxime sequi id. Fugit architecto saepe debitis distinctio dolore saepe earum. Dolor ipsam pariatur. Rerum provident saepe ut sed. Molestias excepturi magnam perferendis magni id inventore autem quis mollitia. Quas magni in modi magni libero nobis ratione ipsam. Omnis dolor recusandae repellendus. Cumque suscipit natus dolore a ut. Libero eum aliquid voluptatum illo illum.

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