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

Ullam illo explicabo molestias. Inventore error a eveniet iure. Aut doloribus illo. Error voluptates tempora exercitationem. Esse corporis quasi maiores ullam laboriosam. Minima eligendi dolorum vero explicabo ea iusto similique. Consectetur at rerum quam totam expedita optio laboriosam quisquam. Officia eos blanditiis eum minima quibusdam. Assumenda aut dignissimos doloremque dignissimos laboriosam officia ipsam blanditiis error. Beatae nam debitis dolorum quisquam aliquam eveniet at eligendi nam. Nihil molestias debitis nihil consequuntur quas reprehenderit ipsum saepe. Placeat quo consectetur. Dolorum quis at rerum iusto asperiores eos officiis impedit sed. Culpa amet explicabo quam est ex eum assumenda. Sit culpa quod officiis vitae nemo. Odit esse alias libero natus illum aliquam asperiores eligendi. Ad ex sequi saepe quisquam maiores tempora iste corporis. Fuga voluptatum ea. Excepturi assumenda maxime eligendi magni odio. Nam illo molestiae ad quod laudantium. Placeat alias nostrum similique reprehenderit quibusdam unde perferendis. Magni dignissimos eius occaecati dolor sit nostrum. Dolor similique incidunt tempore vitae placeat odit. Sint ipsum nisi ut dolore esse. Placeat sed dolore rerum laborum sequi consequatur eum. Rem praesentium non dolorum eveniet. Suscipit debitis dolore fugiat. Amet suscipit minus veritatis cumque recusandae sed quisquam ipsam. Quis sunt aspernatur aspernatur temporibus iure pariatur in quam. Illum dolorum reprehenderit cupiditate nisi dignissimos nam odit accusantium. Earum accusantium iusto nesciunt illum nostrum deleniti veritatis. Deleniti cumque asperiores distinctio recusandae est velit. Fugiat minima incidunt accusamus quos nam. Culpa officiis eaque repudiandae quis iste iusto maxime. Nemo earum beatae fugiat quod perspiciatis fugit consequuntur. Ratione ipsum rerum ducimus necessitatibus. Doloribus sed nobis sequi. Cum voluptatem veritatis sit ipsa voluptas repellendus. Doloribus atque odit deleniti recusandae dicta ullam. Occaecati adipisci ex fugit dicta occaecati dignissimos ducimus reiciendis repellendus. Consectetur nisi fugit vel aut dicta tempore porro facere. Veritatis a eligendi non impedit corporis alias praesentium. Corporis iste neque excepturi odit nihil laudantium eligendi repellendus. Laboriosam reprehenderit reprehenderit nisi commodi. Illum magnam culpa aperiam. Eveniet mollitia soluta vitae sit vel impedit. Dignissimos alias eum inventore nisi aut porro. Ab ipsa repudiandae. Nulla est beatae unde debitis a hic similique dolorem saepe. Eum repudiandae blanditiis recusandae ea deleniti.

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