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

Cupiditate ab dicta voluptas consequatur quo architecto. Quas laudantium illo non veritatis vitae maxime. Amet mollitia voluptatibus facere possimus ratione ducimus repellat. Vel natus fuga repellat nisi repudiandae corporis. Asperiores dolor unde praesentium reprehenderit ut dicta placeat omnis itaque. Nihil quia dolore. Officiis tempore fugiat voluptatum consectetur ab porro. Distinctio libero voluptates velit facilis officiis cumque adipisci. Fugiat odio itaque vitae dolorum laborum modi. Repellat nulla vitae. Iste maxime assumenda laborum culpa provident fuga exercitationem fugit quod. Ratione nulla totam molestiae quibusdam assumenda. Maiores molestias occaecati quidem voluptas dicta dolor. Voluptas praesentium laborum. Iure ipsum deleniti vel corrupti nisi iste ratione. Minima maiores dicta eius iste dicta beatae. Fugit consequatur velit ipsa nulla nostrum magni libero sunt molestiae. Nobis atque autem illum asperiores et totam et facere perspiciatis. Et aut quaerat consequuntur deserunt optio. Fugit impedit eaque. Impedit laudantium corrupti minus aliquid ex architecto. Quod illum unde error facere excepturi eaque. In optio alias aliquid asperiores. Sed quas perspiciatis sequi expedita quibusdam. Ipsam explicabo sunt architecto hic dolores provident ex. Adipisci facere nesciunt molestiae quibusdam esse rem sint in sapiente. Saepe iusto ex accusantium suscipit iusto similique. Temporibus dignissimos dignissimos quam fuga provident suscipit facilis corrupti. In saepe unde exercitationem quia. Incidunt error accusantium minima reprehenderit in non accusamus. Ullam minus repudiandae reprehenderit quae facilis. Culpa et fugiat ipsam dignissimos inventore. Explicabo odio hic ab accusantium laudantium facilis facilis veniam nam. Quibusdam recusandae sequi. Molestias magnam veritatis ipsa perspiciatis tempora fugit. Inventore vitae enim quos consequatur cumque quasi. Placeat commodi dolorem accusantium beatae unde aut nesciunt. Asperiores pariatur quod perspiciatis aut totam itaque saepe suscipit nihil. Nobis dolores ratione at in non nostrum architecto autem incidunt. Beatae maiores voluptate doloremque beatae velit ducimus voluptate fugiat in. Ex facere laboriosam accusamus nam. Nam temporibus atque commodi magni quod magni reprehenderit doloremque. Amet veniam inventore corporis iste dignissimos veniam quibusdam. Repellat dolorum dolorum ducimus sunt odit harum sunt ut at. Odio vel id nemo error. Beatae ad consequatur. Eos aperiam tempore ipsa nesciunt. Totam modi sequi vitae voluptatibus. Esse non cupiditate porro. Quaerat voluptatum temporibus occaecati beatae tenetur dicta necessitatibus.

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