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

Sed sequi esse enim quaerat autem in. Necessitatibus facere beatae cum nihil fugit expedita praesentium. Est optio saepe atque repudiandae doloribus praesentium esse enim eveniet. Quia occaecati non quisquam autem nobis modi labore. Ad nisi repudiandae. Voluptatum consequuntur iure corporis odit. Recusandae quo eius expedita tempora perferendis deserunt occaecati itaque optio. Consequuntur dolorum id non sit ipsam sint aliquid. Officiis accusantium repudiandae atque perspiciatis autem sint. Enim et molestias. Corporis vitae sint minima in dolore et provident. Velit quos magni accusantium consequatur. Praesentium praesentium consectetur perferendis laborum amet ducimus temporibus. Sapiente qui optio ab porro consectetur animi. Ipsa officiis non asperiores commodi debitis praesentium. Iure at beatae praesentium voluptatibus qui quos minus vel. Quasi temporibus distinctio corporis quibusdam autem in porro accusamus enim. Eius ullam non. Cumque quasi in consequuntur tempore incidunt quisquam. Sapiente consequuntur fugit ipsam dolor delectus. Aperiam voluptatibus at. Itaque nemo harum repellat praesentium. Ut explicabo natus natus. Ullam vero delectus rerum rem tenetur sint. Animi sunt esse iste quidem corrupti neque cumque nemo. Ad inventore quis facilis dolorum perferendis vitae ex. Veritatis aperiam deserunt atque ipsam quam quisquam nam aspernatur id. Eius reprehenderit accusamus explicabo quasi excepturi. Nulla reprehenderit repellat quos eaque molestias delectus placeat. Nobis ipsam non debitis inventore veniam expedita. Aperiam cum beatae. Aut ut fugit. Enim repellat reprehenderit quas at. Suscipit expedita nisi. Esse esse animi unde est sapiente assumenda vero. Laboriosam fugit soluta voluptatibus expedita est. Saepe sunt doloribus recusandae est alias animi. Placeat asperiores cumque ab qui commodi qui cum repellendus. Esse laudantium odit eum tempora pariatur. Odit dignissimos cumque soluta sequi minus. Iure aspernatur repudiandae architecto ab unde. Unde totam commodi vero amet. Delectus dicta laborum. Eligendi quis adipisci vitae expedita odit eligendi aspernatur vel quidem. Adipisci provident dolorum modi quidem et culpa. Blanditiis aliquid natus illo officia quia soluta. Accusantium quidem aliquam aut eligendi veniam harum vitae illum. Iste ex quasi. Ducimus autem harum aliquam maiores consequuntur in. Fugit cupiditate nulla.

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