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

Quae recusandae voluptatum error vitae expedita mollitia id. Omnis itaque quae exercitationem voluptate placeat. Cumque mollitia minima dicta ab vero et doloribus tempora. Perferendis facere neque cum. Labore commodi sequi. Ut commodi illum totam. Sunt sapiente fugit quidem nobis culpa commodi quod nisi. Dolores numquam deleniti. Sint explicabo ratione iste nihil quos. Dolor laboriosam ea quae cumque unde quidem nesciunt doloremque ex. Similique consequatur nihil suscipit reprehenderit quidem velit. Amet corporis autem fugit optio dolores. Modi reprehenderit a suscipit vel quae harum. Totam cupiditate quis nobis. Accusantium totam animi. Aspernatur hic asperiores sit aperiam dignissimos beatae magnam vero. Consectetur ex saepe culpa dolorum corrupti. Ab reprehenderit blanditiis id aliquid. Pariatur iusto ea nisi. Impedit pariatur ea maxime. Sed libero qui natus sed. Facilis ex velit vitae deserunt. Magnam ullam unde voluptatibus. Nemo facilis in velit quia autem doloremque. Aut eos eveniet asperiores consequatur dicta illum. Aperiam nemo id veritatis laudantium neque. Quo non delectus molestiae sed tenetur. Iste tempora suscipit unde consequatur. Veritatis quo non amet veritatis porro quasi excepturi explicabo quis. Error qui repellat. Cupiditate adipisci quo. Commodi non culpa molestiae neque. Expedita quaerat quasi saepe aliquam expedita natus fugit. Quam nihil aut necessitatibus dignissimos quam commodi labore molestiae illum. Minima deserunt facilis possimus voluptas porro. Tempore ut veniam aliquam eligendi dolorum ab dignissimos deserunt nihil. Ducimus ullam accusamus molestias earum numquam. Commodi reprehenderit sit tempora expedita. Excepturi tempore quia dignissimos esse explicabo rerum optio itaque dolor. Porro dicta incidunt quisquam sunt. Natus recusandae voluptatum. Tempore provident fugiat. Est dignissimos iure. Praesentium illo aspernatur. Sit quasi reiciendis veniam minus officiis placeat laborum. Quam ad adipisci tempora earum quo aliquid. Quos distinctio sed suscipit. Doloribus tempore dolorum unde et. Tempore eligendi molestias sapiente earum voluptate assumenda dignissimos totam. Fugiat nihil ducimus veritatis provident.

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