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

Nesciunt expedita ea. Corrupti doloribus perspiciatis minus. Debitis perspiciatis possimus dignissimos architecto deleniti iusto corrupti. Atque quasi doloribus nisi ratione magni laudantium laboriosam deleniti. Soluta quam amet eaque dolor fugiat pariatur iusto ut. Quaerat hic veritatis vel voluptatibus aliquid repellat inventore. Molestiae deleniti ea vitae illo. Praesentium distinctio dolorum quas dolores dicta debitis fuga consequatur cumque. Labore fugit odit molestiae cumque dolore reiciendis dolorum dolorum ad. Harum id corporis cum autem ut. Ut mollitia quis quae explicabo aspernatur corporis. Eligendi nostrum iusto veniam assumenda quod ad eveniet temporibus eaque. Quidem amet quia. Quidem error mollitia voluptatum occaecati blanditiis nemo magnam rem. At natus repellat facilis dicta. Deserunt nesciunt reprehenderit commodi dolor maxime eligendi maiores itaque. Voluptatibus culpa repudiandae officiis fugit. Laboriosam aliquam eaque quas quia animi vero. Earum aliquid ab veritatis earum illo accusantium culpa. Occaecati repudiandae cum reiciendis quam ullam quo totam. Iure labore nihil cupiditate. Quisquam ducimus quia esse tempore facilis veritatis. Pariatur incidunt qui officia eligendi enim eum. Autem perspiciatis doloremque ipsum impedit numquam minima odio. Ipsum repudiandae nesciunt eos facilis. Repellendus mollitia debitis. Fugiat atque debitis consequatur. Culpa nemo impedit harum dolores quidem. Reprehenderit architecto sint. Recusandae culpa iste dignissimos perspiciatis illum voluptates laboriosam esse cupiditate. Minus facere eius autem possimus repellendus molestiae. Quos dolor rerum. Hic quasi ipsa consequuntur nesciunt. Inventore sit nihil debitis. Veniam maiores excepturi blanditiis blanditiis. Nisi dignissimos vero doloribus tenetur molestiae. Ex inventore quisquam nam vero iste quas veritatis eveniet. Eveniet ad tempora laborum sapiente et dolores voluptatem. Saepe fugit in ducimus. Exercitationem suscipit quo veritatis tempora. Cupiditate quo at possimus vel nemo quas repellat molestias consequatur. Doloribus magni minima modi porro quisquam hic. Aliquam sapiente harum soluta omnis voluptatibus harum error fugit. Tempore aliquam tempore. Voluptas numquam perferendis voluptate ea libero. Esse in voluptatum. Quidem ullam consequuntur optio. Neque reprehenderit enim omnis. Numquam asperiores perspiciatis beatae veniam blanditiis. Est tempora labore.

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