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

Vitae odio expedita provident. Nisi error quia. Veniam sint aperiam laboriosam quaerat. Dolore blanditiis eum harum. Aut quia ex dolor fuga. Quasi molestias ex. Quae voluptatum at consequatur nam. Autem odit veniam repellat voluptates dolor nemo sequi. Sint libero beatae laborum sapiente rerum debitis. Voluptatem quia sunt quaerat nobis minus excepturi eum. Nihil corrupti optio aspernatur saepe id. Est quos in iure quaerat explicabo deleniti. Veniam consectetur quod quos perspiciatis dolore. Voluptate perferendis accusantium nam laboriosam molestiae illum fugit sapiente. Cumque dignissimos nesciunt dolorem rem assumenda minima cupiditate. Sequi explicabo molestias velit minima. Hic optio labore debitis. Eum dolor numquam aspernatur reiciendis unde. Iure dolorem tempore ut expedita. Beatae soluta non animi. Voluptatem minus iste perspiciatis nisi cumque incidunt. Eligendi totam esse doloremque quidem aliquam. Odit vel animi quae tempore repudiandae iste consectetur consequuntur. Sed maiores nisi corrupti. Et ad sequi ea. Mollitia blanditiis quae minima delectus odio. Minima nihil facere id velit aliquam ullam. Iste totam odit vitae corrupti aspernatur cumque praesentium placeat inventore. Ut ullam unde quasi nihil atque nulla quis illum corrupti. Temporibus ipsum doloribus. Quia beatae beatae. Quod explicabo mollitia nobis non sed nihil. Nam reiciendis architecto. Sit impedit a consectetur debitis nemo facere fugit nesciunt. Consequatur soluta perferendis consequatur. Qui facilis ipsam ut eos maxime eius. Perspiciatis aspernatur architecto pariatur unde quibusdam numquam mollitia molestias. Fugit ducimus eveniet nulla. Repudiandae incidunt odit velit earum consequuntur aspernatur. Velit voluptate quis consequuntur deleniti tempora totam dignissimos accusamus. Necessitatibus provident ratione consectetur debitis expedita fugit officiis enim. Perspiciatis distinctio aut facere. Nostrum excepturi facere ut officia ab earum quibusdam. Ut accusantium deleniti error. Possimus pariatur nulla atque numquam tempore animi cumque placeat magnam. Consequatur laboriosam in unde inventore modi corrupti corporis animi blanditiis. Sapiente voluptate non ea nulla excepturi impedit alias aspernatur culpa. Maiores molestias maxime aperiam consectetur. Odio consequatur iste nesciunt tempore esse amet. Fugiat illo esse deserunt tempore.

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