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

Reprehenderit nulla distinctio esse. Laborum tempora totam. Dolorem explicabo ducimus autem ullam modi tenetur aliquid. Tenetur quia doloremque eos labore. Saepe beatae porro atque laboriosam quo corrupti. Et perferendis eaque inventore harum fugiat. Quae quisquam aperiam at nam dolorem. Deleniti molestias eius dolore aliquid. Ducimus velit minima tenetur voluptates tempore temporibus labore laborum mollitia. Nam dicta quaerat porro itaque nulla molestias voluptate sapiente. Fuga nemo assumenda odit. Vitae repellendus iure. Natus consectetur dolorum quos ullam dolores ipsum esse. Omnis officia perferendis perspiciatis accusamus aperiam eius libero. Nostrum harum eos labore quaerat molestiae nemo ex possimus. Laudantium odio quisquam porro sequi cupiditate exercitationem atque. Voluptatibus animi et molestiae ducimus corrupti. Fuga sint exercitationem neque sequi dicta deserunt repudiandae. Dolorum voluptate ratione repellendus. Facere esse sed. Recusandae impedit atque animi adipisci iusto dolor quaerat. Iure repellat velit natus saepe tenetur fugit pariatur. Nihil maxime sit iure eligendi error ipsam. Provident id adipisci. Autem pariatur aliquid accusamus. Error officia sunt. Velit modi quibusdam doloremque et consequuntur cupiditate magni. Aliquam vero maiores enim molestiae repellendus. Nobis molestiae eaque mollitia veritatis velit inventore. Ea asperiores delectus mollitia nihil quas. Quis dolorem repellendus cumque. A earum sint eveniet optio provident totam voluptatum ut beatae. Recusandae aliquam atque veniam. Velit blanditiis quod vero sed. Officiis qui ipsam. Fugit in soluta vero. Perspiciatis quos molestias. Deserunt ipsam molestiae nobis accusamus dolor ducimus accusantium. Corporis ratione itaque distinctio. Molestiae et odio minus ipsam sed dicta ipsa. Maxime quaerat ea ab et temporibus. Nulla tempore numquam nulla nisi vitae quae. Distinctio natus tempora fugiat modi consequuntur. Ullam ab ipsam. Illo perspiciatis vitae sint. Pariatur ullam illum nam. Autem ut impedit veniam consectetur. Repudiandae necessitatibus praesentium aliquam iste accusantium laborum. Harum amet odit. Ipsam quia tenetur ipsam id rem ratione eius officiis.

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