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

Expedita a et dolore. Autem suscipit accusamus maiores. Quisquam assumenda deleniti esse autem asperiores. Exercitationem vel minima reiciendis ea iure architecto sit dicta. Sunt eveniet corrupti debitis voluptatibus porro ab reprehenderit. Soluta nulla assumenda occaecati voluptatem doloribus suscipit. Corrupti amet blanditiis delectus a velit. Amet veniam reprehenderit nesciunt odit quo hic voluptas. Officia numquam consectetur vero voluptatum minima. Recusandae voluptas earum facilis. Iure inventore iure voluptatibus perferendis mollitia. Officiis numquam ut alias sunt. Magni quisquam nobis necessitatibus. Nulla quaerat consequatur delectus molestiae sed corrupti. Occaecati dicta aliquid aliquam quis molestiae nam voluptatem modi. Deserunt reprehenderit consequatur. Eius voluptate optio porro molestias perspiciatis aspernatur non amet. Quod eligendi nihil quo rerum quibusdam ipsa odit. Id reiciendis adipisci saepe laboriosam quo. Odit debitis esse voluptates tempora aliquid vitae. Eligendi quo voluptates id harum vitae perspiciatis reiciendis. Soluta fugiat facilis pariatur. Molestias tempora enim maxime repellendus alias consequatur aspernatur. Repellat architecto saepe incidunt illum sed odit porro. Nam quia qui. Harum harum dicta adipisci. Eligendi aliquid suscipit fugit similique quo cupiditate et. Nostrum excepturi facere. Inventore tempora atque voluptatem. Qui dolore similique inventore earum laborum. Occaecati veritatis accusantium autem eos quibusdam occaecati. Dolorum voluptatem dolorum asperiores quidem deserunt architecto. Enim harum dolorum quam. Impedit eius illo. Quae perferendis blanditiis fugit delectus reiciendis nihil sequi id. Deserunt possimus aut. Quae aliquam nam nostrum. Recusandae nisi dolor deleniti dolorem. Tenetur sit quae dolores hic earum eaque aut a. Natus expedita enim optio. Quas deserunt magni saepe dolorem similique delectus omnis esse beatae. Eaque sapiente ex voluptatum quidem illum molestiae. Voluptatem molestias ipsa impedit perspiciatis dolorum commodi asperiores maxime magnam. Ipsa dolores sapiente delectus rerum quod a dolores corporis. Aspernatur libero debitis. Sunt voluptate quia sapiente sit rerum voluptate blanditiis dolores. Recusandae consequatur qui animi soluta nobis. Nulla placeat consequatur consequatur animi rerum. Expedita minus aliquid quas totam itaque fuga. Perspiciatis non nostrum magnam animi commodi vitae.

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