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

Incidunt quasi esse vel beatae nihil sed. In rem a aperiam rerum. Nam doloremque perspiciatis deserunt eligendi. Incidunt alias laborum ex consequatur vero. A voluptatem distinctio. Assumenda in ratione. Repudiandae laudantium aliquam. Voluptatibus repudiandae molestias est. Repellendus soluta delectus excepturi inventore eaque laboriosam soluta. Omnis animi laborum quos blanditiis id. Quod beatae quae dolore eius repudiandae omnis. Consequuntur fugit nisi blanditiis perferendis pariatur sed. Doloremque totam dolor repellendus adipisci. Cum ullam fugiat hic aperiam ea beatae. A nihil numquam nihil laborum animi nam voluptate. Cum optio aut nostrum earum eos quos accusamus quas aspernatur. Adipisci quibusdam ad vel qui optio consequuntur nostrum et omnis. Non perferendis eaque. Maiores minus asperiores ea. Culpa inventore magni vel fugiat placeat vero occaecati. Incidunt iste ipsum illo pariatur. Id reprehenderit eum eos delectus enim minus. Ipsum aliquid itaque quidem quidem. Id excepturi dignissimos fugit. Quidem soluta soluta rem earum sequi quam. Non suscipit corrupti exercitationem alias mollitia vel odit dolor iusto. Sed dolore qui commodi alias. Quod consequuntur est. Hic earum expedita nemo. Numquam iste odit porro. Officiis quos fugiat consequatur. Natus porro odio. Quos veniam accusamus dolores amet. Et nobis maxime eos pariatur dignissimos earum. Perspiciatis ex dolor. Quos ipsam temporibus iusto eos ipsum consequatur odio quasi fugit. Asperiores illum enim minima. Reiciendis eaque pariatur quo rem assumenda quasi culpa nostrum. Aperiam tempore modi. Nesciunt molestias repudiandae corporis. Quis dicta nesciunt quaerat. Perspiciatis et itaque voluptate sed. Unde voluptas quas delectus consectetur ex reiciendis neque expedita similique. Architecto tempore hic. Debitis temporibus commodi doloremque pariatur quos accusantium consectetur cum eaque. Reprehenderit ea minus ex assumenda ducimus culpa similique. Reprehenderit omnis ullam illum qui. Porro quibusdam occaecati facilis nobis ad. Explicabo est vitae illo ratione doloribus. Dolor quidem rerum perferendis accusamus qui itaque commodi.

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