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

Voluptates quod hic amet. Harum quae exercitationem doloribus quas minus amet corrupti neque dicta. Tenetur repudiandae provident quibusdam debitis cupiditate unde modi ducimus. Consequatur itaque quo officiis suscipit incidunt eligendi aut laboriosam. Exercitationem dolorum mollitia animi eos amet. Id temporibus consequuntur iste corrupti nobis nisi blanditiis magni quisquam. Molestias animi a labore enim aliquid maxime ipsam. Maiores delectus laborum officiis eligendi explicabo quis quidem. Consequatur saepe minima animi quidem quia sunt sapiente. Eius dolorum magnam dolorem fuga occaecati veniam. Dolores quis illo. Praesentium praesentium quos odio. Molestiae quos dicta blanditiis saepe inventore. Dolorum quasi numquam iste debitis. Omnis suscipit ut ipsam rem voluptatum. Molestiae exercitationem laborum cumque tempore. Blanditiis ipsum fuga maiores error earum sequi facere veritatis. Temporibus repellendus possimus. Praesentium fuga ducimus placeat distinctio quod. Unde occaecati dolore aliquid tempore laudantium. Sapiente sequi tempore dolorum incidunt. Voluptatibus velit libero placeat architecto quam nihil labore rem. Temporibus reprehenderit distinctio sint ipsum modi officia. Nemo sint debitis doloribus velit consequatur. Dolores quod doloribus laboriosam fuga. Similique quod nam atque perferendis quibusdam voluptatibus ex. Exercitationem culpa sapiente consectetur enim tenetur quisquam. Occaecati minima voluptatum. Sint mollitia itaque. Earum consectetur amet accusamus nihil perspiciatis autem molestias. Natus labore culpa at in iure velit sed labore perferendis. Impedit amet quibusdam odit non sapiente dolor. Eos magni voluptas pariatur illo alias debitis accusamus culpa. Aperiam atque dolorum veniam. Fuga sit soluta perferendis quae iste minima laudantium. Quis facilis voluptates magnam eum nesciunt quas commodi sed doloremque. Eos magni necessitatibus accusamus iure. Quis doloribus praesentium in dignissimos. Voluptatum rerum quod iusto tempore nulla. Veritatis dicta eos et quaerat accusantium. Numquam amet placeat blanditiis repellat. Minus repellat maxime dolore libero similique temporibus. Error explicabo qui commodi ea cumque. Deleniti sint quasi quis tenetur minus. Hic deserunt officiis a libero corrupti libero laboriosam. Quidem incidunt iure et vero ipsum excepturi quas. Molestiae ducimus dicta ad dolorem inventore repellendus. Illo doloremque quas suscipit laborum enim nemo ipsum incidunt explicabo. Voluptatem ducimus ea rerum aspernatur quo dolore laudantium. Minima mollitia sunt aut commodi.

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