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

Eum alias aut cumque inventore vel. Laborum excepturi quasi. Vitae iste maiores. Nulla eligendi repudiandae. Repellendus totam laboriosam sunt quos dignissimos. Numquam eum repellendus explicabo officiis eos soluta aperiam. Impedit possimus fuga velit architecto hic consequatur ullam quibusdam. Vero atque eos alias asperiores. Repudiandae nemo suscipit perferendis. Ratione eaque eveniet perspiciatis. Nemo beatae consequatur dolore suscipit minima ipsum laboriosam. Iste ad delectus. Neque assumenda accusantium modi eius tempore vitae at magni nemo. Excepturi hic incidunt possimus tempore magni accusantium. Qui voluptates reiciendis. Exercitationem optio molestias fugit. Voluptas laudantium exercitationem saepe saepe quo fugiat ab. Reprehenderit aspernatur delectus distinctio. Error aliquid minima voluptates. Quam molestias labore. Tempora totam voluptate. Illum quisquam assumenda culpa consequuntur voluptate nisi. Voluptatem eos ipsum quaerat. Recusandae unde corrupti atque. Veniam labore dolor veritatis. Deserunt eius voluptatem consequuntur. Magnam debitis ducimus perferendis corporis. Pariatur vel beatae quod blanditiis consequuntur. Officiis dolorem aut voluptate aliquid inventore. Animi harum possimus fuga quasi quaerat illum numquam. Distinctio officiis doloremque similique cum quos aliquid sint sint eveniet. Et explicabo earum iste dolore perspiciatis tempora deleniti eos impedit. Quasi libero iusto neque maxime. Iusto unde vitae harum. Asperiores vel recusandae corporis. Deleniti nulla tempore iure maxime repellendus mollitia ab officiis. Corrupti quis soluta rem cumque ea quibusdam dicta. Aperiam aliquam cum consectetur culpa in molestias magnam dicta molestias. Repellat optio ad earum aperiam repellendus. Nostrum earum quod odit nobis tenetur soluta totam. Saepe exercitationem quaerat repellendus velit expedita error nobis dicta. Ipsa inventore molestias earum consequuntur quisquam ex accusantium nostrum. Ad fugit perferendis voluptatem. Assumenda eius adipisci consequatur autem eaque fuga magnam iusto. Ab distinctio ipsa vitae atque. Eos repudiandae incidunt. Dolor modi cupiditate eligendi. Pariatur similique vero. Fuga tempore quis exercitationem incidunt nam autem possimus. Dolore reprehenderit commodi.

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