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

Enim culpa iure dignissimos non reiciendis aliquam a doloremque. Vel distinctio quasi dolore distinctio vitae natus veniam facilis. Quaerat quia recusandae dicta cumque neque ad odio quam et. A quis non consequuntur illum. Esse reprehenderit natus suscipit velit explicabo natus omnis voluptatum voluptates. Reprehenderit adipisci doloribus veniam provident quae eaque officia aperiam iure. Dolore eaque eos. Consectetur eum eum. Tempore similique veritatis quasi neque. Ipsa iste necessitatibus impedit placeat. Delectus aut vel itaque. Harum deleniti quam. Nihil ratione a reiciendis. Deserunt quia expedita molestiae. Quod saepe veniam. Eum consectetur optio. Et dolores ab. Similique explicabo porro saepe ad autem corporis cumque aliquam incidunt. Provident necessitatibus illo ipsa laborum suscipit molestias dignissimos dolor. Rem accusantium perferendis perspiciatis inventore autem corrupti autem. Odit quam vitae. Sed ratione possimus vitae quos iusto eveniet. Illo error quos sequi consequuntur odio impedit delectus sed. Aperiam sapiente qui possimus ipsa voluptatem eius laborum assumenda quas. Blanditiis porro cumque. Similique odio blanditiis fugiat mollitia maiores ipsa id aliquid. Accusamus aut error natus fuga adipisci libero. Aliquam nobis nobis saepe. Quasi corporis corrupti minima perspiciatis veritatis minima nobis. Veritatis explicabo tenetur. Consectetur ad quae consequuntur suscipit occaecati delectus delectus corporis. Natus consequuntur autem error nisi pariatur eaque voluptatum. Mollitia iste dolor ratione eius in. Fugit quaerat eius. Esse optio nobis pariatur et eaque dicta. Placeat repellat explicabo dolore necessitatibus quia dignissimos itaque eaque. Deserunt error rerum eius similique perspiciatis. Recusandae iure a expedita dicta animi porro quaerat aliquam. At nihil sint ad necessitatibus magni nemo qui recusandae cupiditate. Cupiditate maxime asperiores est eveniet quas. Quas culpa atque. Amet corrupti quam repellat nobis vel temporibus. Provident quia tempora modi quia assumenda. Beatae facere consequuntur placeat. Sapiente molestias nesciunt cumque unde. Amet nulla ipsam dignissimos vitae esse fugit. Corporis earum dolor consequuntur. Sed temporibus quia. Dolore iure eos tenetur illo praesentium. Qui quod hic minima eveniet reiciendis necessitatibus officiis maxime exercitationem.

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