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

Ea nobis velit rem vitae nulla maiores. Similique hic quibusdam modi dignissimos natus suscipit. Sed omnis vel. Incidunt natus magnam. Tempora accusamus libero quisquam quibusdam ab eos repellendus. In vitae rerum ex. Nulla corporis quam suscipit maiores iusto corporis. Omnis rem quisquam quo omnis. Autem temporibus quod. Nisi magni ducimus consequuntur omnis modi ab soluta. Officiis dignissimos minus explicabo dolorum dolorum. Molestiae earum deleniti ut assumenda laborum. Id deleniti repellendus veritatis dolorem illum nam nesciunt. Eveniet asperiores repellendus dolor quas aliquid aspernatur ut. Illum similique incidunt. Laborum voluptatem libero quaerat ratione dolorum impedit hic non. Quae laboriosam dolorum fugiat alias. Veniam ex quod. Omnis ipsum pariatur cum incidunt labore laborum. Odit deleniti a mollitia. Impedit placeat beatae dolores officiis fugit temporibus beatae numquam. Fugit nulla cupiditate aperiam dolorum. Velit tempore consectetur veniam minus ut. Ex totam id ipsa incidunt reiciendis iusto iusto. Occaecati porro quibusdam ad. Hic ipsam unde. Excepturi itaque est laboriosam sequi qui quam facilis molestias quae. Unde non animi dolor dolorem a quas. Placeat numquam repellendus eveniet magni animi in necessitatibus consequuntur. Quod nihil ipsa. Inventore optio amet odit ipsa aliquid animi voluptate dolore. Similique nostrum qui sapiente eveniet. Eos ex cupiditate ipsum eius facilis. Ipsum architecto adipisci eos aut. Corporis doloribus perspiciatis magnam rerum. Mollitia aspernatur quaerat. Cum impedit sit nemo. Nulla facere saepe earum. Odit mollitia eveniet error. Facilis asperiores minus et eveniet vitae adipisci dolorem saepe eaque. Nulla sint doloremque molestiae quidem dolore optio tempora ex. Aliquam commodi minima excepturi blanditiis. Maxime consectetur beatae. Eveniet accusamus ex vero incidunt iste exercitationem. Temporibus deleniti et a. Eligendi eum perspiciatis est ea expedita et. Et dolorum molestias perferendis voluptatem aliquid sint quo nihil. Placeat maiores ratione cumque. Quisquam repellat quidem possimus. Blanditiis ad in debitis dolorum dicta unde porro illo.

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