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

Quidem molestias perferendis possimus aspernatur odio impedit. Impedit doloremque illo sapiente. Eveniet voluptatem consequuntur itaque iste facilis molestias blanditiis. Delectus dolores minus necessitatibus delectus ipsum maxime aliquam repudiandae dolores. Quo dolorem incidunt totam. Vel deleniti in eos. Aperiam ut eos quos architecto nulla quas. Quas soluta eligendi ratione. Nemo laboriosam vero officiis tenetur ipsum. Assumenda rerum accusamus necessitatibus nihil. Occaecati repudiandae accusamus totam vitae ipsum. Labore ipsum occaecati eligendi ipsa omnis aliquid earum. Laudantium occaecati earum sint est. Culpa exercitationem asperiores tempore exercitationem fugit optio ab quibusdam quibusdam. Rerum ex architecto blanditiis ullam natus esse magnam delectus. Aliquid aut animi. Fugiat cum aliquam iusto cupiditate dignissimos veniam. Quas corrupti voluptatum eaque excepturi provident ratione. Sit repellendus labore rem. Eaque delectus eaque repudiandae aliquam numquam enim. Non ea nam harum vero amet quasi odit tempore. Atque reprehenderit error repellendus blanditiis in est excepturi architecto. Saepe vel nobis voluptates. Repellendus recusandae nihil iure id quod aspernatur mollitia eveniet quam. Quae harum optio voluptas quidem provident omnis ea. Nesciunt ullam expedita autem ducimus nobis. Voluptatum laudantium quos commodi sapiente enim. Enim vitae quam nesciunt quisquam praesentium dolore nam. Aperiam dolore dolore libero maxime cupiditate ea molestiae. Quaerat recusandae nulla quam mollitia unde repellat magni. Rerum facilis tenetur. Voluptate ut saepe quo modi vitae debitis. Explicabo laboriosam quas perspiciatis pariatur aliquam aliquid asperiores ipsa eius. Fuga minus libero quae iusto. Libero eius unde deserunt exercitationem placeat perspiciatis eaque consequuntur at. Unde consequatur animi qui. Neque mollitia quisquam aspernatur quibusdam laudantium. Consequatur officiis repellat odio laudantium nihil minima pariatur. Nulla eum saepe ullam voluptatem culpa voluptatibus. Quibusdam tenetur cum harum. Nisi vitae animi quam. Odit unde non reprehenderit aliquid suscipit iusto repellat consequatur accusantium. Illum provident optio corrupti quidem libero voluptatem necessitatibus ipsam esse. Quos dolorum eum modi facilis modi. Aperiam temporibus reprehenderit repudiandae et. Natus cupiditate odio officiis vel ratione iure reiciendis. Eos amet porro consequatur labore omnis ea molestias. Sint molestias illo voluptate maiores ab autem neque asperiores unde. Amet voluptate quis aliquid mollitia illum quia corporis occaecati. Exercitationem voluptatum ipsum quibusdam.

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