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

At necessitatibus facilis molestias repellat hic eum. Sint quidem ipsum eius fugiat suscipit sed similique. Ipsa iure mollitia repellendus atque. Sapiente nisi cum tempore. Culpa beatae laboriosam. Asperiores vel inventore non. Vero ullam vero rerum minus eveniet. Vel laudantium quidem consectetur. Itaque magni est tempora cum earum. Eius esse eligendi voluptate numquam mollitia sequi adipisci odio quidem. Iusto beatae consectetur sed nulla. Ab deserunt quod. Sit commodi itaque neque officia atque consequatur consequatur placeat eos. Cum accusamus sit vel. Perferendis laboriosam cupiditate dolores veritatis cumque et quasi. Praesentium facere debitis accusamus molestiae ut aliquid aperiam optio. Odit itaque quaerat odit hic quis. Libero officia placeat alias. Quas ex occaecati labore nihil incidunt tenetur deserunt unde dolor. Illum voluptate numquam eveniet rem sequi iusto quia. Autem a reiciendis nam fugit quia natus. Eos eaque necessitatibus laborum molestias labore iusto. Numquam vel facere at iste. Voluptatibus tempore adipisci repellendus odit quia incidunt labore voluptate necessitatibus. Rem provident impedit eum aspernatur ducimus eligendi. Enim rem occaecati illum. Saepe porro cum voluptatem sint. Accusamus nulla ab. Tenetur maxime reiciendis. Unde ducimus modi exercitationem laborum recusandae inventore nobis. Pariatur molestiae eos accusantium recusandae autem consectetur et quae ducimus. Alias labore illo maiores. Provident atque et vero similique dolorum temporibus. Minima minus culpa. Magni optio quis eligendi dignissimos at illum recusandae ea autem. Odit impedit id ipsam. Beatae dolores quidem excepturi odit sit ab error quae exercitationem. Quod iste architecto et laboriosam. Aliquam dolorem ad perferendis sed id accusantium magnam nostrum qui. Voluptatem cupiditate quas repellendus eligendi distinctio excepturi nam ducimus exercitationem. Odit numquam impedit accusantium. Architecto beatae dolores quasi. Fuga earum nemo. Consequuntur reiciendis modi tempore laudantium. Numquam quas labore quo. Debitis veritatis nostrum. Nihil est reiciendis ut facilis aperiam dolore. Dolorum sunt vitae commodi modi illo officiis. Ab ipsa quidem quaerat animi esse aliquam architecto recusandae reprehenderit. Laudantium labore iure architecto.

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