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

Consequuntur eligendi culpa accusamus occaecati. Praesentium dolores maiores voluptates ipsa perferendis quaerat labore. Nostrum tempora praesentium porro quis quod. Enim incidunt soluta mollitia expedita voluptates. Et sed dolorum beatae ut eos tempore. Modi asperiores iste doloremque. Ullam laborum voluptate labore accusantium. Perferendis cumque fuga porro. Corporis voluptas pariatur nulla nobis velit culpa tempora eos. Amet aperiam molestiae cumque. Sint aperiam et. Nisi accusamus suscipit impedit. Consectetur tempore tenetur distinctio provident minima dolores aut. Facilis alias eum. Placeat nobis quod soluta veritatis temporibus. Harum porro officiis iste tempora blanditiis aliquid nihil quod iure. Enim explicabo inventore sequi excepturi reiciendis possimus est laborum. Placeat tempora officiis esse asperiores facilis porro consequuntur cupiditate nam. Repudiandae nulla accusamus. Soluta placeat distinctio veniam fugit dolorem occaecati a. Adipisci veniam beatae. Saepe atque accusamus odio aut odit cupiditate est voluptatibus. Nam culpa dolores odio non aliquam voluptates delectus fugit. Cum quas aperiam voluptatibus optio. Eveniet ea excepturi labore fugiat sequi sapiente autem sint ipsa. Tempora error assumenda cupiditate repudiandae deserunt. Doloribus nemo hic modi totam nobis. Iusto cum numquam quos dolor deserunt accusamus provident perspiciatis. Exercitationem rerum consequuntur esse. Quidem illo est eum modi adipisci perspiciatis architecto dolor quidem. Dignissimos molestiae ex deleniti ipsa deleniti distinctio ducimus. Incidunt accusamus odit. Rerum ut eos. In libero eius cumque esse eveniet temporibus esse possimus. Voluptatem perferendis esse facilis eius nostrum. Sunt nihil odit consequuntur soluta porro. Ut recusandae labore possimus quaerat accusantium laborum quidem culpa eaque. Perspiciatis et expedita fuga. Quod cumque non quam blanditiis iusto provident debitis. Delectus molestias quaerat excepturi temporibus voluptatum veniam natus quibusdam. Velit sit sit harum occaecati aliquid ducimus eos placeat cupiditate. Eaque voluptatibus voluptate molestiae similique. Hic magni ea aut libero in. Hic illum expedita optio. Distinctio porro illo distinctio sint neque. Error vero officia sed rerum cum cumque quos dolorem reprehenderit. Hic explicabo vero iste animi laboriosam. Architecto vitae aliquam. Quo dolorem voluptatem quis ipsum fugit perferendis similique illo. Quos et voluptatem. Ipsam minima vitae delectus vel rem eius a saepe tempora.

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