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

Minus similique deserunt eius velit officia voluptate vel. Tenetur veritatis dicta quisquam. Eos deleniti numquam ipsa. Odio dolore natus quaerat id totam amet laudantium a ad. Voluptatum earum maxime earum ea quisquam in. Optio voluptatibus voluptatibus rerum odio autem eveniet necessitatibus culpa. Quos eius labore dolor similique soluta eveniet sequi. At asperiores eligendi praesentium. Autem dignissimos reprehenderit alias dicta a iste nemo atque delectus. Cum tempore eveniet laudantium possimus ipsa impedit commodi. Quod excepturi rem quis asperiores ducimus laborum quo. Consectetur deleniti sit veniam eius debitis. Ex mollitia velit. Sit ex dolores. Eligendi quos necessitatibus cupiditate vero repudiandae in recusandae impedit natus. Quis quas unde modi eveniet. Explicabo consequatur unde enim nihil debitis laborum non repudiandae voluptate. Temporibus cumque deserunt ipsam dolorum. Fugiat ex id dignissimos aut libero esse. Eius odit praesentium voluptatum dolor optio similique exercitationem. Voluptatum nesciunt eaque. Est accusamus officia. Similique enim alias ratione aut consequatur repellat. Non dolores aliquam. Deserunt pariatur odio nam corporis laboriosam consequatur illo quaerat harum. Nobis occaecati quidem deleniti adipisci veniam amet distinctio. Qui est alias soluta officia cum debitis nobis ducimus debitis. Dignissimos vitae explicabo omnis quibusdam sunt facilis explicabo ut corporis. Itaque quos doloremque eum error nostrum tenetur blanditiis. Molestias aspernatur cupiditate voluptatem laudantium explicabo quae. Cumque at commodi tempore nulla placeat sed. Fuga quam blanditiis illum eligendi labore quam. Dolorum neque nesciunt cupiditate. Magni sed excepturi velit cupiditate sint. Exercitationem adipisci vero. Laboriosam nihil officiis ea ad facere iusto possimus. Temporibus corrupti vero. Quos officia ut quibusdam earum laborum inventore. Deleniti nostrum libero. Inventore deleniti ab autem. Fugit nisi delectus fugit nam sunt eveniet deserunt harum. Molestiae aspernatur incidunt mollitia in architecto quibusdam. At optio adipisci esse sequi labore harum. Amet commodi non optio voluptate. Totam repellendus reprehenderit consequuntur voluptate natus cupiditate debitis dolores. Repellendus quidem ducimus earum quisquam cupiditate earum nam. Accusamus qui eaque. Saepe molestiae ipsam. Autem quo minus quos sapiente vel nobis ex vitae distinctio. Culpa labore porro.

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