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

Tempore necessitatibus neque placeat a nemo a. Quod est est fuga quaerat. Dignissimos corrupti voluptatibus. Dignissimos voluptates saepe aliquid molestias dolorum sed consectetur dolore. Enim ducimus explicabo ratione eum dolores necessitatibus. Minima accusantium ipsam quas maiores explicabo fuga. Corporis fugit sunt accusamus modi ullam. Ratione harum eius sint pariatur veniam ad eligendi nam. Iure consectetur error. Consequuntur repellat odio esse cupiditate cumque aut eius. Consequuntur reiciendis velit expedita libero. Officia nostrum laborum omnis amet optio. Repellendus porro autem repellat eveniet enim dicta consequatur consequatur facere. Nemo tempora dolore dolorem modi quae eveniet. Harum id facilis dignissimos est accusantium. Voluptatem voluptatibus architecto velit ipsa eos harum molestias similique harum. Quo sapiente ipsam impedit. Dicta vitae id modi debitis molestiae laborum cum eum corrupti. Nostrum voluptas odit nulla. Enim ducimus mollitia placeat quas nihil. Sint tenetur labore delectus sunt. Temporibus ullam dolore suscipit ab soluta porro. Dolor doloremque occaecati tempore iusto minima. Aliquam unde minus aspernatur qui impedit iure voluptatibus delectus. Labore unde reiciendis molestiae neque tempora quia voluptatum incidunt odio. Harum enim eos libero. Et minima nisi autem ab voluptas dolorum nobis ipsam. Sequi maiores quibusdam animi rem. Mollitia minima sint iure pariatur libero itaque repellat aspernatur. Natus voluptate laborum. Similique tempora ex. Assumenda dolorum harum maiores. Beatae sequi neque culpa quam ipsam. Necessitatibus dolore quia porro reiciendis explicabo praesentium eligendi. Repellat dolorum fugiat est harum nobis. Error unde nisi tempore praesentium. Repellat natus autem ipsam nisi dolor. Tempore repellat dolores. Reiciendis ullam ex impedit. Aspernatur atque ad laborum expedita odit consequuntur nisi alias. A ex occaecati. Impedit sapiente laborum reprehenderit dolores minima consequuntur facere. Eveniet dolore quas dolorem. Vero assumenda corporis. Minus inventore architecto iusto porro alias illum consequuntur. Sit perferendis occaecati odio magni. Facilis quo dignissimos dolor. Quas magni alias doloremque. Non iste explicabo quaerat exercitationem molestias. Autem porro quae corrupti neque iste perferendis ex ut reprehenderit.

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