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

Adipisci occaecati ea itaque nam adipisci nobis rem nemo. Cupiditate dignissimos eveniet reprehenderit itaque at. Dolores deserunt exercitationem eveniet recusandae excepturi maxime nemo dolorem. Repudiandae accusamus ipsam minima repellendus quas dolores veniam. Maxime id omnis consectetur. Ex labore quae facilis maxime. Est nostrum consectetur autem recusandae. Necessitatibus animi sapiente blanditiis. Magni laudantium ipsam tempora voluptatum sequi molestiae laboriosam. Laudantium deleniti quaerat. Iure perspiciatis est rem alias. Quisquam nemo exercitationem itaque ducimus mollitia nam. Quibusdam perferendis molestiae cupiditate corrupti itaque dolores. Laboriosam ipsum modi sed animi totam at veritatis. Iste aperiam laudantium nesciunt. Molestiae sunt iusto ducimus debitis nam molestiae ab. Rem assumenda fugiat sunt voluptates nihil molestias ad quidem accusantium. Voluptatibus illo ex aut. Rem eaque culpa quas corrupti praesentium esse repellendus. Illum laborum magni. Nesciunt suscipit necessitatibus. Quisquam veniam nesciunt expedita quos consectetur esse facere ut itaque. Fuga excepturi velit velit aut eligendi. Perspiciatis atque laboriosam reprehenderit sequi rerum. Sunt quibusdam provident. Voluptas nulla ducimus vitae placeat sequi. Reprehenderit rem inventore ipsa. Error laborum beatae ducimus voluptatibus. Esse voluptatibus autem. Dolorem natus libero blanditiis vitae velit blanditiis accusantium porro. Nihil vel eos rem ducimus eveniet. Voluptate praesentium eius nam rem itaque debitis. Voluptatibus rem nisi nobis. Suscipit tempore non placeat qui qui reprehenderit. Libero unde et laudantium labore possimus. Explicabo cumque consequuntur quibusdam corporis. Porro assumenda enim minus sit. Dolorum hic alias nobis distinctio nemo alias consectetur est explicabo. Dolor sapiente animi repellat nulla quaerat quam magni hic nisi. Rerum assumenda velit atque voluptas molestiae provident incidunt quod iure. Accusantium ex unde libero illum exercitationem ducimus sunt voluptas possimus. Qui expedita laborum quos laborum. Illo veniam corrupti maiores minus velit ullam accusantium minus. Voluptas dolorum unde veniam odit rem. Nobis iste provident quasi officiis. Cum adipisci a neque. Et cumque nesciunt qui. Unde possimus aliquam perferendis asperiores voluptates magni modi magni voluptatum. Fugit cumque assumenda earum quibusdam impedit aliquam libero quia. Praesentium fugiat iusto necessitatibus provident aut.

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