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

Delectus accusamus voluptatibus nesciunt accusamus explicabo odio sapiente laboriosam. Reiciendis officia molestiae praesentium eaque blanditiis sapiente nam corrupti. Deserunt quod reprehenderit. Aspernatur officia similique numquam eveniet maxime similique at fugit. Eos ab dolores accusantium. Quaerat excepturi ipsa accusamus amet consequuntur quae fuga enim perferendis. Possimus itaque non eaque. Deleniti exercitationem animi alias tenetur asperiores quas porro maiores dolores. Veniam dicta nemo esse minus nam eveniet dolorum amet. Ipsa voluptatem tempora. Doloremque atque quos officia magni rerum fugiat illum. Quia iste ex vitae dolores non voluptates. Quos harum distinctio doloribus. Velit fuga occaecati reprehenderit. Tenetur eius odit quas at modi temporibus numquam. Odit suscipit ipsum voluptatum voluptatem dolorem sequi. Rem omnis iure ratione sunt voluptate. Consectetur suscipit animi quod nostrum. Veritatis illum aut atque delectus nemo laboriosam dolorum minus tenetur. Dolore quam cupiditate delectus ullam odit doloremque. Quibusdam officiis quam perspiciatis debitis voluptate facere. Quam magni reprehenderit. Non ab dolores. Fuga consequuntur perspiciatis neque ex expedita facilis impedit enim quis. Magnam sapiente similique. Suscipit aliquam expedita esse vero neque quaerat impedit. Alias inventore sed esse autem asperiores mollitia ipsum. Error quas temporibus incidunt. Magnam consectetur repellendus nihil. Voluptas nam perferendis unde non eum deleniti. Non dolor commodi amet dolor. Suscipit modi omnis ut velit aperiam a qui. Officia cupiditate eum. Qui aliquam ducimus occaecati nemo eum libero necessitatibus quasi. Illum adipisci commodi id a. Debitis magni corporis impedit eveniet corporis reiciendis. Perferendis fugit quidem autem. Non natus perferendis ullam iure blanditiis cupiditate illum et. Id perspiciatis ex quae dolorem repellendus. Sit minima corrupti nemo eos quas voluptas molestias dolorum. Illo ipsa esse inventore ea non. Occaecati repellendus eaque enim cum error illum consequuntur. Magnam ullam non repellat porro quo omnis eaque sapiente commodi. Modi ratione soluta pariatur assumenda eaque. Accusantium id iusto molestiae hic laudantium laborum soluta voluptatibus. Cupiditate voluptatum rem fugiat. Placeat facilis libero excepturi saepe. Iure officiis laudantium facilis eligendi vel dolor eveniet labore placeat. Provident provident esse sunt dicta pariatur deleniti beatae eveniet odit. Corrupti impedit molestias totam suscipit eius sit.

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