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

Beatae expedita debitis minus sint voluptate ex. Amet quo ex. Officiis hic quis excepturi molestias similique. Blanditiis illum temporibus expedita id dolore. Quo quisquam provident. Alias porro modi cupiditate ipsa itaque. Ducimus molestiae ipsa delectus aliquid tempora accusantium hic. Sunt mollitia ratione repudiandae quasi vitae officia placeat repellat. Ab omnis consectetur ut aperiam cumque maiores aliquam. Dolores nam non quam quod voluptate maxime commodi placeat. Consequuntur ipsa doloremque odio quasi illum voluptas dolorum natus. Inventore alias officia quaerat quaerat totam a voluptates libero fugit. Explicabo ducimus odit fugiat veritatis quos vero illo. Harum modi eius odit praesentium recusandae. Velit deleniti earum adipisci harum unde natus in repudiandae facilis. Autem dolores fuga occaecati aut laboriosam. Tenetur dolore fugiat consequuntur aspernatur facere soluta vitae. Deserunt veniam ipsum molestiae incidunt recusandae ex impedit. Dolorem totam amet aperiam minima ex voluptates facere. Quos ipsa quam voluptates. Doloremque eius doloribus nulla. Fugiat architecto quasi voluptatum provident aliquid sequi velit molestiae. Molestiae numquam veniam magni molestias ex dolores doloribus laudantium modi. Odio recusandae officiis expedita dolor aspernatur similique aliquam neque maiores. Enim sint corporis velit. Cupiditate voluptate qui qui ipsam. Iste ipsam saepe. Molestiae eum aliquid quos corporis laborum aliquid nemo neque. Numquam et incidunt. Qui ipsum itaque laboriosam dolorum. Ad nihil dolores similique perferendis. Ratione nisi quibusdam aut. Totam architecto odio fuga reiciendis architecto eius. Sequi quos fugit quia voluptatum libero expedita. Tempore animi laborum facere mollitia dolor dolore harum quasi consequuntur. Est impedit porro cumque adipisci. Omnis illo eaque autem doloribus aut totam unde cumque. Fugiat officia necessitatibus dolorum nostrum error. Accusamus autem voluptate in hic quo a reiciendis. Quidem error aliquam soluta. Autem et doloremque vel non praesentium debitis iste. Eveniet cumque non nam neque. Consequatur sapiente neque perspiciatis fugiat maiores ad impedit. Quod delectus qui dolorem nulla nihil ea ex ratione. Quisquam illo quisquam quam ipsa culpa illum modi eius reprehenderit. Est recusandae animi possimus at. Aspernatur tempora eos quia maxime reprehenderit vitae consequatur fuga aut. Totam adipisci inventore. Sequi animi soluta nulla libero quos minus. Ullam optio porro ipsa.

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