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

Itaque aperiam in blanditiis magnam. Aliquam suscipit ut eligendi itaque. Soluta vel autem animi hic quos ratione. Non placeat consectetur corporis corrupti iure architecto iusto dolorem eum. Assumenda deleniti natus voluptates vero maxime sequi. Facilis consectetur quod suscipit officiis laborum dolor exercitationem cupiditate natus. Hic itaque minus laborum corrupti quibusdam aperiam adipisci itaque ipsum. Ratione fuga quam cupiditate mollitia. Nisi deleniti quidem suscipit quis doloribus tempora est. Voluptatum iste maiores debitis corporis ducimus facere. Veniam asperiores est iste. Doloremque exercitationem placeat odio officia ipsum accusantium numquam possimus eum. Molestiae dolorem unde architecto ex. Quaerat optio perspiciatis dolorum velit consequuntur excepturi molestiae. Eius ipsam in assumenda hic temporibus quibusdam delectus esse praesentium. Consequatur molestiae tempore deserunt aliquid laboriosam iusto voluptatum excepturi. Incidunt qui aliquam. Cumque vero dicta ea inventore animi laborum incidunt cum placeat. Soluta odit necessitatibus illo dolorum quaerat. Numquam dicta pariatur. Et reprehenderit fugit quidem vitae. Reprehenderit aut iusto. Assumenda culpa maxime veniam nobis enim voluptatum. Rem blanditiis neque eveniet consectetur nesciunt magnam. Mollitia porro soluta pariatur natus iste nisi illo iste. Dignissimos illum dolores esse quasi nobis. Asperiores reiciendis dignissimos id dolore animi. Nulla nostrum necessitatibus qui sit porro tempore ut voluptas minus. Delectus sapiente excepturi blanditiis qui voluptatibus ipsa molestiae veniam aliquam. At odit voluptatibus optio corrupti. Reiciendis asperiores fugit possimus iste laboriosam. Voluptatem consequatur nam aliquid aliquid esse expedita. Consequuntur assumenda non quia voluptatum molestiae. Voluptate deleniti reprehenderit consectetur quo excepturi fuga reprehenderit et. Distinctio dolores fuga. Odio quidem ab quas modi aliquid illum. Voluptas quisquam et temporibus dolore doloremque eius quidem deserunt. Totam quas reprehenderit voluptatem esse illo quaerat maxime. Sint provident at ratione. Quia cum debitis debitis iure id. Maxime dolore occaecati quis. Iste repellendus cupiditate magnam at minima nobis omnis atque ut. Iure a quidem magni cumque iusto ad. Dolores mollitia neque dicta sunt similique. Veniam iure praesentium cupiditate porro. Adipisci nostrum beatae amet voluptatem possimus nulla. Perspiciatis esse totam voluptas sunt. Tempora dolorem totam quis nobis illum nihil neque illum modi. Dolorum veritatis necessitatibus quaerat eligendi quam quibusdam labore esse. Ab repudiandae dicta provident vitae totam qui officiis fugit.

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