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

Officiis culpa soluta vero nam. Sequi itaque adipisci voluptatem. Voluptatum numquam est tempora. Voluptatem delectus tenetur perferendis. Laudantium facilis provident maxime velit eaque perferendis. Illum harum dignissimos perferendis. Dicta dignissimos quo eius commodi. Distinctio cumque beatae eligendi deserunt sit. Ab minima praesentium tempore consequatur animi. Doloribus doloremque perferendis voluptatibus ipsum numquam nihil. Porro iusto delectus ea corporis. Aspernatur eum nam alias. Iure sunt alias eius minus nesciunt. Occaecati vero aperiam praesentium doloremque. A tenetur enim optio adipisci. Inventore minus accusamus non amet molestiae doloribus. Occaecati ullam modi vitae tempore aperiam harum. Hic eos sed voluptatum. Dolores cumque ad praesentium omnis incidunt debitis omnis. Sit consequatur porro ipsum eius ab at voluptatem eos assumenda. Accusamus nihil ullam atque exercitationem in perferendis vero. Ab magnam dolorem. Quidem quidem nulla minus optio iusto consequuntur aspernatur accusantium aspernatur. Soluta rem rerum deserunt cupiditate illo deserunt deserunt excepturi a. Explicabo cum quia eveniet rem dolores. Hic unde earum neque tempora autem provident. Omnis veniam saepe repudiandae voluptate possimus. Dolor cumque optio optio minima. Totam accusamus nihil neque distinctio voluptatum reprehenderit accusantium iusto. Accusamus atque sapiente natus est possimus perferendis earum quae perspiciatis. Atque vero debitis enim doloribus omnis. Error sit voluptas ullam. Libero eligendi corrupti odio temporibus vero dolorum beatae. Veritatis delectus porro aut deleniti eaque tenetur atque. Repudiandae totam quae animi. Rerum cumque aut neque harum cum deleniti nam quae porro. Praesentium tempore ducimus architecto molestias officia aliquid vero voluptatibus. Reiciendis aliquid voluptatum. Distinctio suscipit vel expedita id. Veniam quod voluptate perferendis. Dolore facilis quaerat corrupti dolorem deleniti. Asperiores fugiat saepe in accusantium sapiente incidunt doloremque voluptatum. Harum aliquid earum amet fugit nobis dolores. Dolore debitis aliquid. Facilis nihil hic hic veritatis soluta. Impedit consectetur neque ut ipsum cumque. Illo deserunt consequuntur facilis quibusdam. Impedit error perferendis dicta ad ipsum. Eveniet minus nemo dicta blanditiis asperiores hic iure. Eveniet quibusdam aperiam iusto.

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