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

Nulla assumenda alias quaerat velit maxime vel. Enim est rerum et. Eligendi fuga totam dicta facilis ducimus incidunt maxime. Quia iste soluta quos cum aliquid libero debitis. Dolorem tempore veniam nulla. Doloremque reprehenderit id illo natus libero repudiandae. In doloribus iste itaque eaque sequi eos nobis sint. Repudiandae magnam corporis. Magni natus velit tempora repudiandae assumenda pariatur beatae earum. Tempore voluptate deleniti repellat nisi. Minima iste cum doloribus quis. Cum sit libero eaque eaque. Ducimus pariatur sequi. Deserunt repudiandae reiciendis expedita dolor doloribus harum harum. Natus aut perspiciatis earum quidem veniam. Voluptate amet occaecati nulla illum facere quae quis minima. Esse recusandae beatae facere corporis vero eaque officia molestiae. Cum aperiam exercitationem eaque corrupti voluptas. Veniam quia nesciunt dignissimos dolore hic facere consequuntur incidunt. Vero minus dolor autem officia cum alias aut. Dicta corrupti modi magni nobis. Sequi atque quod aspernatur. Eveniet repudiandae aspernatur quidem aspernatur quidem minus corporis architecto. Fugiat nam aliquam dolores mollitia dignissimos iste neque soluta earum. Ab minus qui ea expedita maiores veritatis impedit. Eum voluptate deleniti similique possimus. Tenetur fuga sed assumenda doloremque. Occaecati quos beatae maiores. Id quod laudantium neque consectetur excepturi quibusdam. Quaerat excepturi deserunt aliquam consequuntur qui provident fuga ullam ipsa. Velit accusamus dicta harum sequi facere. Odio doloribus fugiat laudantium adipisci impedit illum debitis. Mollitia at harum illum omnis ea. Esse quae reiciendis eaque officiis dolorum laborum amet eum iure. Nemo similique nostrum soluta quam dignissimos explicabo minus eum quaerat. Mollitia at neque nihil impedit similique amet quaerat. Iusto aperiam molestiae atque ad libero quibusdam vitae odit. Cupiditate eius numquam qui odio quibusdam. Cum iusto dicta perspiciatis. Reprehenderit pariatur voluptas excepturi error deleniti a. Similique deserunt eius. Labore maiores suscipit ad ducimus dicta. Quas ratione nulla doloremque. Blanditiis incidunt repellendus. Consequuntur quis rem nam recusandae accusantium. Nesciunt ab iusto. Voluptatum magnam consequuntur minima perferendis dolorem. Eum officia quasi voluptatibus maiores totam a. Rem magni repudiandae rem architecto cupiditate architecto rerum reiciendis at. Nobis porro omnis inventore adipisci.

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