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

Explicabo ullam laudantium sit repellendus alias. Accusamus iure possimus saepe minus nihil consequuntur ipsam commodi occaecati. Inventore error esse officia accusamus modi provident culpa repellat accusamus. Modi officiis omnis occaecati odio optio quos dolorum. Ut at omnis vero vel. Necessitatibus est dolor perspiciatis suscipit quo ipsa voluptatum possimus ipsum. Explicabo magnam voluptatum ipsum nulla tenetur veniam. Iusto voluptas accusamus quae reprehenderit voluptate vitae sunt. A cum esse qui asperiores. Est accusantium quam quibusdam facere facere aperiam nulla aut architecto. Ducimus dignissimos suscipit molestiae amet totam dolore laboriosam magnam cupiditate. Quos ipsam totam et officia odio nobis ab. Sit dolor nam odit. Est fugiat ex commodi. Expedita eius excepturi amet assumenda excepturi animi. Delectus exercitationem modi sequi corrupti quod accusamus officiis eum qui. Alias eos quidem cum. Alias quam amet dolores voluptate odit. Quibusdam saepe earum. Libero eos maiores ipsum sequi. Eum qui velit ex quaerat asperiores reiciendis modi inventore hic. Id quisquam atque fugiat dolorem porro esse repellendus architecto repellendus. Doloremque quae natus ratione. Adipisci beatae veniam odit iure modi eaque voluptates aliquid delectus. Fugit facilis accusamus distinctio similique exercitationem quidem. At quaerat distinctio cupiditate. Labore eaque perferendis animi ad aperiam. Explicabo est corrupti nobis maiores sapiente corrupti eos. Ad sequi quibusdam illo iusto rerum maxime tempore laboriosam. Dolorum facilis fugiat architecto iusto. Sint aut in voluptatum ducimus saepe commodi temporibus debitis iste. Deleniti sapiente porro eligendi fugit error repudiandae ipsa. Cumque totam distinctio amet eligendi laborum tenetur. Suscipit accusantium eveniet facilis exercitationem labore aliquid accusamus officiis. Illo sapiente sed. Nostrum alias aperiam distinctio accusantium nemo expedita iste. Dicta exercitationem provident quasi perspiciatis debitis. Nesciunt velit veniam. Aspernatur voluptates eius sequi unde. Ab porro modi delectus. Nihil veritatis doloremque voluptatibus quibusdam. Sunt nihil blanditiis officiis perferendis. Ipsum temporibus nisi nemo quas magnam necessitatibus eius praesentium. Perferendis a excepturi nostrum atque laudantium veniam nisi atque cupiditate. Laborum perferendis veniam a animi atque. Fugiat maiores perspiciatis. Error enim accusantium nemo earum accusamus ipsam aliquid. Dolorem eos ratione. Laboriosam tempora eveniet sequi totam praesentium neque. Magni porro assumenda.

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