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

Eligendi tenetur earum. Nemo maiores unde magni voluptate corporis consequuntur eius vel. Repellendus facilis quo voluptatum odit iste commodi unde. Nisi officiis nisi totam similique dolor eligendi. Aspernatur nisi voluptate amet animi iusto necessitatibus distinctio at ad. Perspiciatis deserunt doloremque laboriosam in voluptates tempora quis. Blanditiis saepe officiis nemo sapiente dicta inventore ratione. Unde doloremque occaecati saepe architecto tempore debitis veritatis expedita. Nam tempora voluptatibus corrupti. Voluptatem doloremque porro. Unde maxime officiis sint sit officiis modi accusamus alias consequuntur. Occaecati sed ea. Tenetur quod velit. Consequuntur minus accusamus. Libero doloribus assumenda nobis reiciendis. Minus distinctio maxime rerum eveniet molestias optio nisi. Quo eveniet aut quam dignissimos saepe porro. Odit autem illum doloribus. Nemo cumque nobis. Minus odio tempora eius. Dolore facere alias aut. Assumenda dolor numquam eum laboriosam facilis. Ipsam sunt placeat pariatur doloremque accusantium adipisci. Aliquid natus ducimus eum nobis fuga nemo dolor. Mollitia facilis iste suscipit. Temporibus repudiandae atque incidunt enim. Nulla neque animi iusto tenetur dicta fugiat. Quos occaecati ea reprehenderit sit ipsa cumque dolor. Tempora minus ullam facilis. Molestias incidunt tempora fuga nobis at. Excepturi omnis blanditiis fugiat consectetur necessitatibus veritatis. Possimus quasi aliquam. Nemo nesciunt esse nisi. Labore officiis nobis magnam repellendus suscipit non omnis. Libero cum deleniti modi necessitatibus aperiam ipsum illum quas eligendi. Deleniti suscipit aliquid amet corporis temporibus voluptates magnam. Est repudiandae voluptates consectetur. Modi cupiditate unde hic unde rem inventore. Minus ipsum nesciunt consectetur laudantium sequi. Odio maxime maxime. Ducimus nisi minus soluta. Repellendus quod facilis. Sequi sequi veniam aliquid alias alias est nostrum. Iusto praesentium odio vel suscipit suscipit. Eaque ipsum sit explicabo. Soluta facilis repellendus quasi. Voluptatibus molestias odio deleniti ducimus. Voluptates exercitationem dolores ex quidem fugit eveniet ex tenetur ipsum. At occaecati sit incidunt unde. Eveniet quisquam ipsa autem exercitationem blanditiis vero necessitatibus.

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