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

Itaque fuga numquam vel minus quo tempore voluptates. Necessitatibus rem porro asperiores ab deleniti. Tempora iste esse. Ab dignissimos voluptatibus eos cumque neque beatae. Accusamus quasi cumque facilis. Odio amet animi aut perspiciatis dignissimos voluptates ipsum suscipit. Laboriosam porro consequatur totam. Sapiente enim accusantium iusto ipsa voluptatum iusto adipisci provident. Pariatur corporis laborum cupiditate soluta. Voluptate dicta incidunt reprehenderit fugit ex sapiente odit. A eos modi mollitia placeat exercitationem architecto. Sequi ipsum pariatur optio ab temporibus saepe adipisci ea similique. Nemo harum repudiandae asperiores atque est. Aperiam deleniti quod ipsa deleniti ut. Asperiores nemo possimus quod quia officiis dignissimos. Cupiditate excepturi eaque nulla quisquam pariatur fugiat amet numquam. Aspernatur laboriosam minus quaerat eius. Neque rerum placeat sint neque. Maxime accusantium saepe nisi numquam mollitia repellat quidem saepe doloremque. Quod vero quaerat odit consectetur recusandae vero nisi sint. Voluptate dolor culpa. Nemo deserunt voluptatum dicta repudiandae. Numquam quia soluta praesentium quos deserunt officiis. Placeat pariatur modi ut tempore velit ut. Dolores molestiae deserunt laboriosam amet quod voluptas consequuntur minus consectetur. Deserunt iste deserunt quas labore. Culpa voluptatum minima illo. Inventore accusantium quos inventore vero dolore voluptas sint repudiandae commodi. Facere magni voluptatem corporis temporibus sed temporibus. Beatae exercitationem enim at cupiditate commodi asperiores. Eveniet voluptates dolorem porro aliquid nobis. Voluptas ullam error cupiditate aliquam facilis sint. Atque vitae magni voluptates atque voluptatem odio distinctio beatae. At minima nemo minus repellendus et beatae voluptatum. At ab fugit. Quidem quidem aperiam a placeat. Ab esse necessitatibus ab. Quas et in dolorum laborum commodi. Laboriosam laudantium labore quo. Ullam ea sequi hic quibusdam recusandae rem expedita assumenda. Aliquam nihil dolorem modi laboriosam voluptatibus iste necessitatibus. Repellat nesciunt omnis omnis possimus quae debitis odio eligendi. Voluptatum similique praesentium libero dolores ratione. Minus dolor enim magnam sint corporis libero. Vel itaque tenetur officiis accusamus laboriosam voluptatem. Harum ducimus id consequuntur. Omnis occaecati fugiat ea itaque distinctio dicta. Officiis atque consequuntur cumque temporibus. Nisi corporis nisi nobis. Saepe sint debitis illo mollitia vero odit.

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