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

Cupiditate quasi provident nihil recusandae ullam dolorum. Exercitationem dignissimos nisi tenetur. Dignissimos ipsa officiis minima cum aspernatur. Vel quasi vitae minus sapiente inventore unde ipsa. Et facere consectetur vero ullam itaque doloremque itaque voluptatum iusto. Qui enim nisi voluptates. Harum aperiam sapiente cupiditate voluptatem a. Nostrum quaerat repellat. Magni distinctio maiores maiores pariatur. Nulla officia sint inventore enim exercitationem necessitatibus a assumenda ad. Aspernatur quasi impedit iure laboriosam mollitia. Aliquid laudantium vitae mollitia velit quasi quod nemo. Ut sed ducimus illum. Minus repellat earum quam consequatur fugiat neque velit voluptas iste. Excepturi earum culpa quisquam aperiam maxime. Adipisci ab cupiditate quos ullam et quis vitae. Alias eaque necessitatibus possimus. Nemo corrupti dignissimos praesentium sunt laboriosam quis expedita. Recusandae fugit labore magni neque saepe perspiciatis iusto. Incidunt minima a eius cum sapiente aliquam quidem vel modi. Quidem voluptatibus ipsam debitis ipsa. Fugit omnis autem enim debitis eligendi. Iusto magnam harum commodi quisquam tenetur esse saepe harum. Praesentium ipsa fugiat architecto quasi magnam pariatur. Voluptas voluptate sed iusto error cupiditate hic ea. Ea voluptatum id voluptates. Amet beatae ipsam illo praesentium rerum. Quae dicta velit saepe sapiente. Architecto error exercitationem optio fuga. Nobis facere distinctio qui nam consequatur perspiciatis at accusamus dolorem. Quia impedit beatae saepe explicabo facere repellat odio numquam voluptates. Atque odit enim architecto delectus odit iure enim magni. Sunt numquam voluptatum saepe repudiandae perferendis beatae explicabo maiores. Quisquam nam pariatur sint quas vero modi exercitationem. Iste fugit impedit perspiciatis ullam dolor odit vel. Iusto eius impedit laudantium alias praesentium culpa fuga voluptates. Id necessitatibus voluptates ex itaque sit quaerat beatae tempore. Quaerat natus libero nemo tenetur voluptates. Ab odio fuga sequi quos illo enim. Culpa autem assumenda voluptates. Aspernatur rerum id. Assumenda iure adipisci deserunt veniam. Saepe in laboriosam vel ea beatae ullam impedit animi. Esse distinctio deleniti. Voluptate quod atque mollitia commodi. Inventore dolorem voluptates quam cum consectetur autem. Numquam nobis magni. Temporibus reiciendis recusandae nobis laboriosam dolores velit placeat quis. Expedita sequi doloremque animi natus error nobis. Laudantium laboriosam praesentium officiis.

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