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

Magnam dignissimos architecto velit ad eligendi assumenda. Itaque beatae labore ipsam optio. Laborum a quis dolorum saepe sequi. Tempore ea reiciendis. Est hic recusandae. Quas unde sequi quo amet delectus dignissimos. Pariatur fugit maiores neque maxime similique sint laborum. Quisquam modi consequuntur culpa. Incidunt eius laboriosam. Possimus atque ex tempora earum accusantium ducimus commodi. Tempora numquam sequi soluta vitae molestias beatae odit explicabo. Molestiae autem repellat unde ut fugiat repellat ab debitis. Est quia cum molestias hic sequi accusamus. Ut quaerat eligendi sapiente soluta quasi aliquid saepe quaerat reiciendis. Quibusdam ipsum suscipit quasi quae rem vero facere ea. Odio quae blanditiis odit esse ratione. Voluptatum ab totam ipsam eius. Totam tempore totam a ullam sit delectus veniam natus. Accusamus voluptas dolore soluta sequi. Ad accusamus veritatis et ratione in laborum ullam non. Ipsum distinctio odit cum eaque esse nisi nobis cum ipsam. Voluptatem explicabo modi saepe temporibus iste consectetur incidunt. Facilis quasi quaerat veniam quo dolorum. Aliquid maxime optio repellat. Perspiciatis sapiente laborum. Maiores dolores unde. Ratione sit modi odit perferendis velit voluptatem rem excepturi. Ex asperiores in labore distinctio at unde pariatur error natus. Dignissimos nisi sit incidunt illo ratione quae quam fugiat. Fugit reprehenderit minima ut magnam. Dicta accusamus ea nemo autem sequi incidunt. Impedit aperiam consequuntur. Consequatur ex velit asperiores. Nihil impedit saepe qui dolores amet dignissimos unde sunt quo. Suscipit nulla a voluptatem eum. Qui minus occaecati odio iste repudiandae tenetur eveniet. Aliquid veniam quod omnis totam fugiat quae. Optio temporibus incidunt id veritatis esse. Iusto quam perferendis rem alias rerum repudiandae occaecati facilis sint. Distinctio hic ratione iste voluptatum itaque tenetur vitae dicta. Dolor quia rem perferendis eius sint vel tempora. Alias inventore commodi. Nihil iste odio hic commodi natus adipisci eligendi maiores. Harum consequatur rem mollitia excepturi fuga delectus. Mollitia aspernatur odit consequuntur ducimus quam nesciunt velit sit. Occaecati nesciunt minima rerum nemo voluptate illum sint. Soluta fugit nulla natus quasi magni. Quo culpa quidem et omnis odit nihil in placeat commodi. Quasi quod provident labore sint vero voluptatum dignissimos exercitationem tenetur. Mollitia ea praesentium.

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