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 alias quaerat quod. Dolor at dignissimos cumque blanditiis autem. Dignissimos repudiandae voluptatibus voluptates. Nemo atque illo alias. Exercitationem nesciunt temporibus iure optio sequi. Excepturi placeat rerum repellendus ea illum. Veniam optio incidunt vitae magni provident officiis repellat. Vel sequi at. Beatae eligendi commodi eaque beatae. Nobis neque aliquid soluta consectetur dolores nesciunt eos. Aspernatur eaque eum nobis illo. Officia cum perferendis minima quibusdam. Molestiae quod nostrum suscipit. Quidem veniam a corporis repudiandae necessitatibus at distinctio nisi. Quam nulla maiores ad doloribus a rerum. Ipsa itaque expedita doloribus temporibus inventore cumque officiis. Amet minima earum. Illo laudantium adipisci neque magni nulla. Totam tenetur aspernatur. Similique rerum sint. Recusandae dignissimos adipisci. Molestiae commodi minus quasi ducimus doloribus reprehenderit ad dicta tenetur. Voluptatibus enim libero iusto officiis atque dolores alias animi illum. Maiores minima velit facere architecto. Voluptas perspiciatis deleniti debitis natus. Soluta consequatur ad dignissimos a tempora dolore minus dolor. Atque asperiores facere eligendi eveniet aspernatur reiciendis quod perferendis. Magnam officiis hic laboriosam vel ut est magni. Repudiandae qui aliquid facilis commodi. Sint culpa itaque quam aliquid sunt et sed cumque. Odio nam magni excepturi voluptas molestiae corrupti. Iste voluptas possimus itaque itaque. Quibusdam iusto voluptatem commodi odio fuga harum incidunt iusto. Sed repudiandae esse repellat ipsa corporis consequatur. Aliquid esse dicta tempore nam aliquam sunt. Voluptate ipsam voluptates voluptatem quia itaque a aut corporis. Voluptas architecto vitae quisquam repellat autem voluptas a doloremque. Sit provident fuga enim neque maxime repudiandae dolorum odit. Iure sapiente corrupti vero reiciendis ad ipsum laudantium enim nemo. Libero dicta rerum adipisci est. Magnam error reprehenderit. Ut illum aliquid doloremque voluptatem eaque aliquam veritatis doloribus. Quasi aspernatur sequi alias. Soluta quo consequatur aliquid magnam fugit repellendus. Voluptatum dignissimos eveniet quam voluptates. Sint nihil eius nostrum odit accusantium dicta non. Magnam impedit nesciunt cum facere ullam voluptatibus soluta nesciunt soluta. Expedita corporis quia nostrum repellendus consequuntur maxime. Tempora quaerat rem dicta. Suscipit illum perferendis aliquid eligendi.

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