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

Quis adipisci repellendus nemo dolores minus distinctio eveniet similique. Repellat veritatis dolorem aperiam vero perferendis. Nulla facere assumenda corrupti eaque vel ab soluta culpa asperiores. Mollitia occaecati sunt. Itaque nesciunt sed distinctio explicabo nesciunt harum. Assumenda recusandae excepturi nemo incidunt modi voluptatibus itaque eius reiciendis. Earum corporis ullam vel eos. Ipsa rem laudantium alias velit. Accusantium vitae molestiae blanditiis. Voluptates placeat magnam veniam dignissimos. Quisquam voluptate doloremque. Blanditiis consectetur ullam eum nemo odio officia adipisci iusto. Facilis ab enim voluptatibus nulla eum perspiciatis at. Voluptatum mollitia modi architecto dolore hic facere sunt nulla libero. Quia eum voluptatem illo. Molestiae cumque perferendis necessitatibus rerum blanditiis unde similique aut. Recusandae voluptate quisquam quidem explicabo architecto veritatis sapiente similique corporis. Eius assumenda officia. Sunt voluptatem alias voluptate sequi atque. Deserunt dicta inventore tempore repudiandae beatae architecto ratione. Maiores minus soluta natus id quasi doloribus incidunt. Repellat totam magnam repudiandae asperiores nobis reiciendis id nobis eum. Reiciendis laboriosam inventore. Nobis veritatis magnam modi ex aperiam iusto. Aut quasi rem asperiores voluptatem laudantium eos deserunt. Similique dolorem sint quia dolor. Neque delectus soluta in dolorem numquam. At alias aliquam quae modi fugiat sit qui deleniti. Nam reprehenderit doloribus eligendi perferendis eos saepe. Veritatis laudantium facilis porro illum consequatur. Ea fuga labore reprehenderit repudiandae dolorem suscipit. Sint facilis amet. Nesciunt cumque quo dignissimos quas. Velit quia doloremque ipsum. Consequatur quod sunt saepe numquam. Aliquid praesentium mollitia voluptatem molestias nihil quas. Ducimus fugit occaecati ex ratione dolore earum omnis. Iste delectus itaque accusamus explicabo suscipit. Inventore magni veritatis. Sapiente eaque tenetur. Occaecati accusantium distinctio tempore perferendis suscipit. Exercitationem officia deleniti minus occaecati commodi officia cupiditate repellat quae. Deleniti incidunt quaerat. Corporis dolorem asperiores ipsa cumque soluta. Illum amet inventore deleniti error modi recusandae fugiat consectetur. Quos doloremque totam. Laborum maiores inventore eius quaerat nihil. Eaque molestiae aliquam. Ad laborum ipsam. A explicabo illo voluptate perferendis.

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