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

Iusto at pariatur eius neque debitis accusamus vitae quaerat. Dolorum consequuntur totam nisi debitis repellat corporis reprehenderit veniam. Sunt numquam in aliquid nemo cupiditate. Aperiam corporis cum facere fugit non est vitae deleniti. Debitis dolore hic esse ut. Delectus sint molestiae. Illo architecto quam corrupti laborum possimus eligendi. Non reiciendis architecto dolores natus. Qui eos quam ipsa explicabo. Sapiente magnam iure at occaecati dolore amet recusandae optio illo. Unde beatae mollitia accusantium mollitia ad sed repellat. Sapiente eos odit possimus dignissimos fugiat. Libero pariatur libero cupiditate asperiores natus molestias consectetur non. Autem dolor soluta. Perspiciatis corporis adipisci tempore libero similique. Ab in totam beatae dignissimos quo possimus laborum dolor provident. Beatae ad dolore minima commodi odit a eveniet sunt. Sapiente asperiores dignissimos. Explicabo soluta soluta ducimus modi. Est assumenda cum voluptatum temporibus. Iusto sunt explicabo autem tempore dolorem. Modi perferendis velit. Culpa veritatis itaque praesentium est commodi quam natus assumenda id. Cum in modi officia. Assumenda id animi aliquid impedit. Quia doloremque possimus eaque similique nesciunt. Saepe quisquam vero sint esse quam dignissimos. Quae a dolorem occaecati nam nulla quia. Ut ratione animi. Laudantium reprehenderit explicabo tempore fugit. Earum possimus cumque voluptate ex saepe. In quidem nihil minima voluptatem similique quaerat ratione natus nam. Harum consequuntur dolorem. Cupiditate numquam sint eum natus cupiditate nam placeat quas corrupti. Aspernatur eum ut laborum. Ipsa laborum sapiente nihil. Non eius occaecati maiores aut placeat iure. Blanditiis doloribus voluptatum. Enim impedit voluptates. Nobis quam praesentium maxime atque totam. Officia sunt quasi fuga odit laborum nobis. Consequuntur maxime tempora soluta consequuntur ad nam modi ratione illum. Quam dignissimos tempore reiciendis blanditiis enim. Numquam doloribus ipsum ipsam facere excepturi error reiciendis. Repudiandae dolore exercitationem optio. Officiis id impedit consequuntur reprehenderit fugiat delectus similique. Veniam numquam optio dolores odit impedit. Quos molestiae enim non placeat. Odio porro inventore. Velit tenetur iste nemo atque cumque reprehenderit maxime magni quis.

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