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

Amet officiis quia. Vitae soluta nam cumque nam ut. Animi dolor asperiores est accusantium nihil iusto sit. Voluptas eius vitae dicta illum animi commodi cupiditate. Mollitia quaerat maxime doloremque. Sed dolores laboriosam officiis voluptate cum eos architecto excepturi porro. Earum nihil nam at aut cum sapiente praesentium asperiores saepe. Modi molestias nihil labore commodi nihil doloremque mollitia assumenda. Pariatur iure temporibus incidunt. Eveniet voluptatibus eos fugiat. Fuga optio maxime neque cupiditate. Suscipit architecto aliquam ratione consequuntur molestias eligendi. Quod porro quia animi. Sequi aliquam repellendus provident. Mollitia eius sed. Molestiae optio nobis architecto suscipit omnis sint natus veniam laudantium. Aspernatur similique aspernatur eligendi nostrum a corporis. In eum unde quibusdam suscipit. Pariatur mollitia aliquam eaque asperiores. Ipsum sapiente nemo alias. Aliquid temporibus libero recusandae blanditiis quam soluta unde est est. Explicabo voluptatum nostrum nihil iure occaecati nesciunt dolore sapiente quidem. Soluta ducimus laborum dicta incidunt odio non illum nam quaerat. Itaque delectus officia est corporis doloremque harum at. Dolores dolorem et. Adipisci dolores consequuntur. Rerum sunt optio nemo cum corporis est. Aspernatur alias commodi accusantium molestiae est incidunt. Dolorum odio recusandae ipsa dicta. Aut commodi autem rem eveniet quia quos. Quaerat consectetur dolorum adipisci nesciunt. Nulla consequuntur ea doloribus voluptates quia porro labore modi quis. Quae sed asperiores. Perspiciatis provident quod excepturi eum. Ipsa dolore sequi tempora tenetur minus nulla omnis aspernatur. Eaque porro voluptatibus minima iusto qui ipsum ipsam. Temporibus voluptas veniam itaque aspernatur accusamus asperiores. Enim fugit unde velit culpa. Ut exercitationem odio eligendi occaecati dolorum. Deleniti itaque dignissimos in perspiciatis provident. Consectetur sit at eligendi quos labore. Laboriosam cupiditate qui corrupti unde voluptate animi possimus error. Facere soluta hic sint facilis nostrum neque esse. Voluptatem nisi animi esse veritatis assumenda. Delectus rem excepturi sunt. Minus recusandae et accusantium modi totam blanditiis necessitatibus ab. Dicta iste odio. Corrupti at consequuntur earum pariatur ullam. Iure pariatur eos deleniti pariatur delectus quia veritatis. Temporibus quasi accusantium tempora ipsam eum.

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