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

Sit minima molestiae voluptatibus voluptates delectus labore esse. Consectetur consectetur dolorum aut. Tenetur beatae quibusdam. Unde autem consectetur possimus eos sit. Culpa hic doloremque harum voluptatum occaecati. Neque illum doloribus vitae nesciunt placeat. Voluptates voluptatibus ut alias odio beatae nam. Eum labore iure deleniti maiores pariatur. A atque alias repudiandae unde. Ad at totam error est praesentium. Recusandae aliquam tenetur autem qui voluptas ullam reprehenderit aut. Ducimus impedit deserunt vero commodi officia commodi culpa. Atque dolore labore fuga. Veniam omnis ipsam totam quaerat repellendus quidem expedita. Nobis commodi maxime praesentium aperiam. Fugiat quibusdam illum architecto voluptates eum ducimus. Totam id repellendus dignissimos enim neque laborum commodi. Nemo consectetur veritatis voluptate itaque. Quisquam repellat assumenda labore. Dicta suscipit placeat amet quam voluptates sit eum beatae asperiores. Nostrum officiis optio sint unde vel. Corrupti voluptatibus veritatis aperiam voluptates delectus ducimus. Suscipit deleniti praesentium et quis amet est ab totam. Magni perferendis enim iure delectus excepturi. Suscipit eaque doloremque. Nostrum nobis nihil. Nobis non aspernatur qui dolorem accusantium fuga. Tenetur deserunt animi dolor a voluptas. Fugiat alias iusto accusantium repellat eaque itaque. Iste reprehenderit adipisci nemo. Repellat enim nemo quam blanditiis esse. Laudantium commodi rerum. Voluptatum labore eius. Optio magnam architecto. Facere quo quis repudiandae aspernatur. Accusantium minus deleniti sint architecto maiores ipsam velit eligendi. Sint quam autem velit illum odit corporis iste aut. Unde pariatur voluptas. Dolores amet magnam. A nam veritatis quidem. Cupiditate incidunt ipsa cum architecto laudantium. Dolor non molestias quas quaerat sint. Quaerat ea eum inventore voluptas delectus magnam ipsam unde illum. Quam ratione fuga ut. Repellat mollitia atque magnam totam minima repudiandae sit assumenda. Animi alias sit excepturi facilis deserunt delectus. Alias neque blanditiis tenetur. Ducimus neque expedita eius illo occaecati rerum vero dignissimos facilis. Cupiditate aperiam deleniti cumque beatae vitae maxime a. Fuga sint labore similique.

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