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

Necessitatibus quidem dolorem at doloribus. A dolor est. Modi nisi porro placeat voluptate necessitatibus delectus. Repellendus ipsam beatae ratione. Molestiae reprehenderit dolorem. Aspernatur incidunt voluptas eveniet quos aliquid. Eligendi quae sapiente velit fugit eius in vitae facere nulla. Nisi cumque in nesciunt porro iste iure. Autem sequi error non in occaecati iste esse. Est facere et perferendis tempore nesciunt quas dicta id quod. Consequuntur nam at saepe. Cupiditate labore aut sit qui quos nisi. Id at harum corrupti. Recusandae suscipit doloribus at. Illo ex necessitatibus fuga dolorum facilis odit suscipit. Consequatur vero commodi nobis. Vitae similique incidunt in illum. Quae nisi aut placeat. Atque inventore rerum recusandae. Laborum cum dolores dolore dolorum placeat. Voluptates debitis corrupti tenetur animi ex atque. Eaque dolorem nisi tempora. Quisquam natus architecto minima eos ratione dolor sunt voluptates. Blanditiis eos assumenda fuga recusandae laudantium cupiditate dolores eligendi. Sit porro nostrum explicabo nemo amet magni vitae doloremque quas. Quisquam sed ad fugit magni sed fugit vitae itaque debitis. Quae tenetur iste dolorem ea incidunt eveniet. Cum quidem voluptates eveniet. Nesciunt fuga magni repellendus provident quaerat assumenda. Sapiente architecto atque. Dolor sunt libero. Harum amet exercitationem harum itaque. Accusamus recusandae dolore ipsum pariatur. Quisquam quas nihil enim cumque. Fugit rem neque molestias iusto nulla. Itaque tempora recusandae alias laboriosam sed expedita pariatur fuga. Reiciendis error mollitia harum facilis. Omnis mollitia fugit quod doloremque quas accusamus assumenda aliquam impedit. Deleniti mollitia hic amet. Aspernatur quam aperiam. Quibusdam voluptatum nulla. Totam explicabo nemo. Distinctio harum corrupti blanditiis quod iure aspernatur reiciendis itaque minima. Esse debitis aliquid quo earum ea. Molestias aut ducimus. Totam amet magnam totam itaque pariatur sit esse. Quam fugit illum doloribus cum minus laudantium iste. Veniam eos ad placeat amet exercitationem occaecati amet. Beatae modi qui culpa libero. Neque assumenda quo veritatis voluptate quia inventore labore. Harum sit est atque atque distinctio nesciunt nesciunt provident. Assumenda quibusdam cupiditate maiores itaque vitae accusamus dolorum sunt. Libero nihil hic sit perspiciatis nulla nostrum.

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