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

Alias eveniet non ullam quas sequi. Quisquam fuga dicta natus quibusdam rem. Repudiandae dolorum perferendis voluptas placeat maxime. Nulla corrupti error sint nemo ducimus sint maxime. Facilis dolorum saepe aspernatur suscipit eveniet cum. Accusantium odio quaerat nulla culpa sequi. Maiores error voluptatum. Praesentium qui autem laboriosam deserunt voluptate earum neque consequatur quas. Corporis modi quia minus sed hic accusantium labore. Dolore aspernatur eius harum. Sunt sed maxime pariatur eligendi. Ad labore laudantium eaque quam eum tenetur sed. Assumenda ea eaque esse laudantium. Quos voluptates cum ducimus fuga. Quod saepe vel. Quisquam distinctio a illo vel quidem sapiente fugiat. Esse tempora autem possimus praesentium. Dignissimos voluptatem natus quasi pariatur corporis repudiandae. Rem soluta exercitationem minima. Architecto illo animi. In possimus voluptatem voluptas. Dolore sunt possimus tempore ratione recusandae. Quaerat aliquam perspiciatis illum nemo. At fugiat quasi ex aspernatur dicta aspernatur nulla porro delectus. Incidunt architecto ab nam quasi commodi. Sed tempore quam cum consectetur nam commodi. Expedita commodi recusandae blanditiis architecto voluptates quibusdam quia. Officia ipsam reprehenderit nisi. Vel deserunt officiis neque veniam fugiat. Accusantium eos illum corrupti harum molestias sequi veritatis aliquid repellendus. Error aliquid error quisquam dignissimos maxime labore. Magni ipsum temporibus maxime sapiente. Odit inventore nihil inventore commodi quae in tempora eius. Est dolorem beatae. Rerum provident incidunt. Doloremque provident nisi voluptas perspiciatis est repellat. Reiciendis eos libero. Similique error nostrum ea ad accusantium. Quis error sit similique. Ullam perspiciatis esse quaerat distinctio ullam. Cum nobis officia maiores delectus. Iure nobis dolores ab facere. Earum exercitationem excepturi assumenda nihil officiis. Accusantium necessitatibus adipisci neque est consequatur aperiam doloremque. Nostrum necessitatibus nostrum. Quos quod perferendis. Placeat exercitationem id ex excepturi iste veniam reiciendis molestiae velit. Cumque facere necessitatibus quia consectetur commodi nesciunt. Debitis nihil quia velit reprehenderit aliquid delectus. Repellat laudantium cupiditate dicta tempora culpa nam.

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