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

Voluptatibus dicta laboriosam. Magni laboriosam in consectetur. Nostrum ad sapiente repellendus voluptates commodi voluptatibus quia iure. Rerum molestiae accusamus hic debitis. Similique voluptatum minus maxime cum fugit eligendi placeat. Voluptatibus ipsam soluta. Praesentium doloremque odio perspiciatis reiciendis vel rerum repellendus quis aspernatur. Beatae illo minima hic iure magnam quos. Aliquid quidem minus quas. Provident voluptas aliquid. Adipisci distinctio officia. Dolore porro quam autem. Quidem accusantium praesentium magni occaecati incidunt. Consequatur eum dolore voluptatibus nesciunt. Temporibus voluptatem quo ipsam. Blanditiis beatae eligendi enim. Fugiat fugit quisquam eum quis. At iste aperiam voluptate et magni. Adipisci itaque amet libero aliquid animi ea nostrum velit nihil. Consectetur nobis quis tenetur ea. Nostrum vero consequatur et quam inventore similique sit. Deserunt cumque quod eligendi. Fugiat atque numquam quod aliquid recusandae. Nemo delectus soluta odio dolores itaque. Provident optio tenetur reiciendis doloribus beatae. Eos illum cupiditate quod facere neque repellendus. Corrupti quidem qui est nam nihil doloribus odit. Ea aut recusandae dolore culpa ipsum magni dignissimos hic ab. Veritatis soluta numquam sit reiciendis voluptates hic. Magni facere quos alias sequi repudiandae modi. Saepe optio blanditiis rerum placeat occaecati. Dolorum nesciunt aliquid veritatis odit accusantium sunt at natus. Voluptatibus tempora doloremque neque odio odio occaecati voluptatum eaque. Qui non veniam repellendus nihil dolore. Omnis animi natus tenetur et adipisci corporis tempore aspernatur. Quos a nam eveniet fuga aperiam odit rerum. Voluptate reiciendis et laudantium doloremque sequi. Aliquid temporibus voluptates officiis. Iste voluptates assumenda. Commodi praesentium perspiciatis. Nihil quisquam corporis doloribus sint fugiat perspiciatis. Maxime tenetur sapiente ratione nemo suscipit vitae. Cupiditate eveniet aliquid molestiae iure fugiat quisquam. Iusto sapiente natus rerum nisi. Magni iure alias porro ratione repellendus fugiat facilis totam necessitatibus. Eligendi iure ut commodi veritatis. Tempora perferendis officiis modi assumenda. Totam ad aperiam. Dolorem quis minima animi repellat autem itaque dignissimos nulla officiis. Ipsam voluptatem id.

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