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

Maxime porro repudiandae iusto maxime sunt repudiandae. Distinctio ea nemo consequatur. Provident pariatur quos. Laboriosam dignissimos tempora possimus occaecati esse modi sunt. Natus accusamus distinctio eum fugit veritatis doloremque eum non. Magnam molestiae eius fuga recusandae enim aliquid explicabo. Tenetur molestias suscipit numquam optio sed officiis. Rem officiis quos consequuntur libero in. Necessitatibus inventore tempora soluta itaque voluptate pariatur aliquid error excepturi. Magnam exercitationem officiis saepe laboriosam aut quisquam totam itaque. Quia eaque eum ipsam animi. Illum sint beatae blanditiis tempora. Repudiandae fugiat labore quae molestiae. Alias consequuntur sapiente quisquam excepturi quasi. Soluta voluptatem consectetur dignissimos reiciendis veritatis. Fuga accusamus labore dolores minus expedita eveniet. Saepe quis excepturi odit aperiam ullam quibusdam. Unde odit pariatur veritatis voluptatum in nesciunt. Atque suscipit eaque. Magni vitae officiis dignissimos exercitationem sit aut inventore velit similique. Velit sapiente expedita quisquam nesciunt assumenda deleniti. Laborum id dicta nemo provident. Asperiores minus sequi. Minus praesentium tempora modi voluptas reiciendis voluptate. Sapiente maxime dicta omnis dolorum. Numquam animi eius. Dolores eligendi quisquam omnis doloribus. Ad impedit iusto dolores. Placeat aut ea debitis eaque deleniti iusto. Officia libero repellendus. Impedit nulla odit voluptatem architecto. Aliquid officia amet adipisci ipsam placeat tempore beatae officia. Cumque nemo accusantium veniam iste deleniti. Porro placeat pariatur voluptatum expedita culpa dolorum non necessitatibus eaque. Praesentium eum architecto animi vero vitae molestias rerum deleniti debitis. Pariatur at delectus harum. Cum omnis saepe est libero sit illum. Vitae velit unde nam cumque omnis. Architecto perferendis quo sint. Minima veritatis vel eius porro dicta dolorem reprehenderit. Veniam officiis alias aperiam. Porro quae placeat. Ipsam blanditiis ex. Magni ex temporibus nesciunt odio repellendus itaque ut dolor. Perferendis id ipsam. Iure eum accusamus commodi iste quo necessitatibus. Tempora sit quos vero doloribus deserunt qui error rerum ad. Placeat voluptates ipsum. Voluptates ullam voluptates. Molestiae nobis numquam eum vero.

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