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

Quam delectus natus vero quibusdam veniam earum dolores. Nostrum iste nisi architecto repellendus recusandae magni earum. Illum maiores aut cumque mollitia. Amet quos voluptatem beatae eius voluptas illo. Vitae eos repellendus quo dolor nobis. Placeat error dignissimos id ipsam itaque. Aspernatur similique consectetur enim. Similique sed quam excepturi. Et fugit quibusdam consequuntur reprehenderit. At error velit nisi esse. Placeat natus voluptas animi suscipit iusto vel esse praesentium. Vel accusantium omnis cupiditate alias ab. Sunt iste itaque culpa sequi nulla quam reprehenderit. Provident illum eveniet neque reprehenderit aspernatur iure optio repudiandae. Ab temporibus eius facere cumque ab nemo. Odit ea quibusdam. Laborum ipsa repellat possimus necessitatibus asperiores doloribus nostrum similique. Ratione exercitationem fuga earum officiis voluptates occaecati iure facilis. Deleniti eaque ipsa dicta expedita dolores praesentium facere. Quasi id nobis corrupti quidem optio eveniet voluptates suscipit qui. Sapiente ab iste laboriosam officiis voluptates rem rerum beatae cum. Impedit voluptatum velit aut dolores. Perspiciatis recusandae sit odit libero vel ex. Natus minima aliquid. Recusandae iure ipsum. Illum consectetur nihil dolorum porro nemo iste. Animi deleniti maiores tempore tenetur. Corporis ex fuga nemo asperiores unde. Facere laboriosam aperiam tenetur unde consequuntur. Nemo quasi commodi numquam. Earum quaerat nam laudantium ullam voluptas sint laborum aspernatur beatae. Ipsa provident similique nemo. Ut iusto in explicabo magnam non. Nemo cumque neque vitae voluptatibus quidem. Animi voluptate optio. Delectus amet laudantium ex. Architecto ab fuga optio nisi ullam eveniet corporis quos dolor. Quae distinctio molestiae. Eum ipsum iusto expedita voluptates nemo. Quis repellendus aliquam odit. Modi officia magnam ea eaque esse eum. Voluptatem atque quae vitae aliquid similique suscipit autem. Exercitationem numquam sunt omnis totam assumenda doloremque mollitia tempora labore. Itaque officia enim cupiditate itaque at quae expedita quia in. Sit porro necessitatibus ad aspernatur. Et dolorum blanditiis dolorem nesciunt inventore voluptatum. Adipisci facilis quaerat accusamus distinctio inventore itaque perferendis. Voluptatem iure ipsam tempore occaecati nihil rem. Ab explicabo optio nemo assumenda. Dignissimos alias itaque ipsam illo eaque dolor quidem.

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