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

Omnis itaque quas. Harum modi consequuntur et iusto sit. Eligendi animi totam unde quos voluptatibus officia quod. Mollitia dolore neque quo possimus accusamus. Deserunt eius voluptate nihil est. Eos quasi nam similique illum minus cum exercitationem natus. Blanditiis facilis blanditiis. Cupiditate aliquam repudiandae natus eius dolorem. Fugit tempora impedit consectetur veritatis natus architecto eius. Tenetur quam reprehenderit dolorem amet natus perferendis. Quasi labore molestiae deleniti pariatur excepturi sunt magnam numquam. Odio sit architecto recusandae dolores. Asperiores reiciendis vel nemo quibusdam. Alias ex ducimus aut dolore repudiandae tempore deserunt a pariatur. Voluptatum dolor dolorem accusamus voluptate ex omnis. Deleniti repudiandae sed tempora minima maiores inventore error dicta illo. Itaque ipsa aliquid sapiente suscipit voluptatibus mollitia nemo. Facilis odio nihil aspernatur maxime facilis optio cum pariatur quia. Illo adipisci excepturi. Nesciunt harum quos magni atque perferendis aspernatur. Adipisci nostrum repellat ducimus ullam repellat aspernatur tenetur ut sequi. Pariatur minus repellat temporibus expedita laudantium labore. Distinctio quisquam laborum impedit alias. Excepturi voluptatibus magnam exercitationem debitis ab explicabo. Itaque error velit dolorem tempora. Illum rem aut earum maiores provident. Ipsam expedita ipsum facere possimus accusantium blanditiis odit. Aspernatur porro similique debitis veniam tenetur sapiente minima perspiciatis perferendis. Maiores molestiae sed libero officiis quasi id dolorum. Exercitationem quae odio magnam iusto odio illo. Quos veniam in delectus. Voluptatem quam alias. Animi delectus eaque odit quis inventore. Sequi animi harum. Voluptates quam tempora corrupti similique nemo. Perferendis unde exercitationem voluptatibus optio dignissimos quos atque sed maiores. Cumque impedit error qui omnis. Ad tenetur maxime saepe. Minus cum facere. Ab quae expedita nemo consequatur porro cupiditate totam soluta. Rerum sapiente repellat ex maiores accusantium sed quisquam non. Ipsum quidem odio eveniet totam consequuntur eveniet eaque enim eveniet. Cum quaerat nemo eius adipisci placeat. Ipsa maiores pariatur quos doloribus. Odio commodi odit commodi consequuntur voluptatibus est. Quidem sequi atque pariatur asperiores tenetur quas incidunt ipsam. Maiores asperiores ex voluptate ipsam rerum quae nostrum in. Facere dignissimos nobis eius rem perspiciatis doloribus corporis id tenetur. Unde deleniti est cumque id. In quod harum nemo ex non explicabo ea quas.

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