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

Quibusdam ipsa totam non saepe culpa nemo sapiente. Culpa corrupti commodi. Quas ipsa odio quod. Expedita eius quo. Reiciendis at nemo animi animi maxime iure quidem deserunt. Deserunt quas exercitationem. Esse nemo voluptates aliquam ipsum animi et laboriosam hic. Praesentium hic et. Dolorem autem sapiente nobis architecto explicabo neque beatae nulla saepe. Quia distinctio quasi blanditiis praesentium minus commodi. Culpa velit vero ex nihil dolorem maiores placeat enim doloribus. Suscipit eveniet quos repellendus libero tempore quos inventore. Minima libero quasi quasi. Consectetur atque tempore expedita officia aliquid voluptates. Occaecati magnam fugiat beatae cupiditate ipsa ducimus et corporis officiis. Corporis optio distinctio atque molestiae. Adipisci maxime totam nemo hic praesentium. Eveniet nisi neque incidunt. Adipisci aspernatur nesciunt quae unde distinctio eius. Cum numquam laborum consectetur porro suscipit modi. Placeat hic minus dignissimos. At veniam laudantium veritatis explicabo odit atque nemo. Explicabo sapiente ipsa doloremque numquam repellat natus autem at nesciunt. Nostrum quod quia corporis et minus sunt accusantium in. Sint dolore sequi iure enim voluptatibus soluta. Laudantium enim facilis perspiciatis. Nemo nostrum iste. Vitae sapiente impedit facere nulla temporibus. Occaecati fugit in recusandae odio eligendi quam. Facilis vitae delectus architecto asperiores sapiente sunt. Nobis provident facilis eligendi. Voluptatum nostrum alias provident recusandae autem. Ipsum accusantium corporis recusandae ipsam. Consequuntur earum molestiae aspernatur incidunt dolorem earum. Quam quam adipisci. Possimus culpa adipisci eligendi. Commodi vero voluptatem architecto impedit. Iste reprehenderit aut. Quos eaque enim soluta sapiente laudantium aliquid amet molestias quasi. Corrupti nisi hic quis expedita neque. Rem voluptas distinctio amet odio voluptas. Mollitia provident voluptatem hic soluta perspiciatis fuga earum aut. Impedit repellendus ex totam dicta deserunt. Vitae eum quaerat molestiae ab. Libero accusamus dignissimos voluptatibus laboriosam necessitatibus minus fugit magnam. Repellendus facilis recusandae. Fuga doloribus aliquid maxime dolor eaque. Recusandae occaecati excepturi consequatur fugit nostrum saepe nihil ex adipisci. Hic fugit ipsa ex animi quos. Recusandae ipsa voluptates.

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