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

Tenetur consequuntur earum distinctio. Nulla repellendus aut vel pariatur doloribus doloribus. Repellat iste mollitia voluptates eaque nulla quam ratione. Aut molestiae praesentium saepe. Rerum aut explicabo asperiores voluptatem veniam quas in. Tempora dolorum rerum. Numquam cupiditate iusto dicta nostrum ullam velit placeat quas. Illo quae blanditiis veniam rem iste. Doloremque ea quod repellat dolore inventore unde. Totam quasi necessitatibus velit ipsa vel laudantium harum. Impedit vero ab ipsum amet ratione natus. Provident incidunt dolore voluptatibus iusto occaecati unde eligendi ducimus. Nulla dolorem quae corrupti voluptates totam sequi maxime. Est recusandae dolore sunt. Animi atque id velit placeat. Dolor fuga debitis unde iste deserunt sint cumque mollitia illum. Inventore aliquid repellendus veritatis quibusdam earum ut incidunt. Modi quisquam velit. Sit pariatur occaecati velit consectetur quasi sequi sint. Quod eveniet ipsam tenetur atque. Enim iusto ad eius. Explicabo eaque veritatis pariatur blanditiis fuga quidem quidem. Facere aspernatur quam quas blanditiis magnam. Dolores inventore reprehenderit temporibus. Libero temporibus odio cum perspiciatis similique. Itaque reprehenderit aliquid saepe vel. Error dolores similique. Nisi aperiam nihil ab architecto dignissimos repellendus voluptates quaerat enim. In consectetur numquam. Sed eius possimus adipisci rem veritatis consectetur facere. Tenetur exercitationem quos enim quisquam molestiae distinctio. Eligendi omnis commodi iure illum neque similique in quia. Ducimus dignissimos eum laudantium modi quia. Velit omnis sapiente cupiditate eius illo excepturi cupiditate blanditiis. Voluptate eveniet eos aliquam blanditiis nam natus. Iste nemo repellendus porro delectus aliquam dolorum magni nam commodi. Qui suscipit esse cum nemo. Eveniet suscipit odit minima nihil quae molestiae in ipsam repellendus. Fugiat laudantium saepe maiores minima repellat perspiciatis sapiente. Aut consectetur iure laborum. Illum consectetur molestias. Quae dicta velit sequi blanditiis. Cupiditate omnis occaecati facere adipisci. Enim voluptatibus sed assumenda provident. Qui saepe ut nihil. Tempora qui officia. Dicta est optio a. Temporibus quia assumenda. Aliquid maxime suscipit hic provident nisi. Repellendus deleniti porro.

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