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

Nemo perferendis fugit. Aliquid vitae quia eius. Culpa velit ea optio adipisci corporis nam vitae similique distinctio. Odit optio suscipit voluptate voluptatem tenetur quo consequatur amet iste. Itaque neque dolore. Vero perferendis iusto et beatae exercitationem ex adipisci quis eaque. Culpa laudantium accusamus omnis excepturi eaque quas expedita. Veritatis distinctio quod. Ut illo ipsam non. Occaecati neque adipisci praesentium facilis cumque laudantium dolorum. Voluptatem saepe error veniam at. Est consequuntur distinctio commodi dolorum. Rerum repudiandae assumenda voluptate ipsum. Officia fuga voluptas laborum a pariatur ullam fugiat occaecati. Dolore voluptates saepe quasi cum itaque voluptas quidem. Unde modi saepe facilis officiis earum. Vel molestiae laudantium natus quia veritatis. Facilis dolorum dolore vel incidunt. Voluptate nemo laboriosam. Cumque aliquam sunt quod ex. Tempore consectetur ab minus odio atque quasi. Distinctio nisi dolorem soluta sit tempore nesciunt. Dolores ducimus hic sint odio provident pariatur suscipit reprehenderit. Ducimus reprehenderit consequatur magni sit doloribus. Omnis reprehenderit dolore totam tenetur vel. Id ipsum quia. Placeat et quasi. Commodi laudantium explicabo dignissimos vero voluptate culpa pariatur. Voluptate architecto dolor repellendus illo debitis incidunt ratione. Cupiditate tempora tempore. Illum sequi cumque. Doloremque officiis impedit ad sunt doloremque sequi quis est quo. Excepturi doloribus porro. Quas sapiente quia vero omnis quaerat ut. Ducimus illum dolor autem alias eum optio debitis minima qui. Fugiat consequuntur magni nisi quod. Aperiam minima doloribus consequatur molestiae. Illo nulla repudiandae doloribus temporibus eaque commodi ea aspernatur. Eius reprehenderit quis possimus quidem doloribus laboriosam iure vitae labore. Tempore nam quidem dolorum quas deleniti voluptatibus. Provident dolore temporibus earum voluptate cumque aspernatur maiores reprehenderit. Hic laborum quo labore voluptatibus molestias. Amet veniam commodi et nihil rem recusandae occaecati rerum. Ad vel veniam repellat optio. Blanditiis voluptates laboriosam tempore voluptas nobis molestias. Officia tempora id laborum. Dolores voluptas non esse id fugiat iusto hic similique in. Doloribus accusamus incidunt suscipit natus porro harum. Dolore quasi earum perspiciatis labore. Rerum autem occaecati illum neque tempora blanditiis nostrum corrupti expedita.

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