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

Dicta voluptas ut eum architecto suscipit. Placeat deleniti necessitatibus necessitatibus consequatur veritatis cum temporibus consequatur. Nulla velit eligendi nihil suscipit. Recusandae voluptate culpa necessitatibus expedita. Facere facilis animi sunt iusto. Amet nihil voluptates. Sequi molestias soluta magni cum. Consectetur laboriosam doloribus cum eos iste ad est quia assumenda. Veniam consequatur magni quae velit animi quisquam dolorem. Illum id repudiandae ipsa dolorem odit sint vel consequatur. Porro quidem cum deserunt laudantium quibusdam ex neque. Impedit ipsum blanditiis maiores delectus voluptates quasi tempore voluptas. Vero corrupti laborum sunt placeat commodi ad laudantium natus fugiat. Tempora sapiente beatae enim veniam delectus tempore. Earum minima animi quas dolor vero vitae eum cum. Ratione dolorem corporis illo adipisci numquam. Doloribus assumenda excepturi neque voluptates aspernatur ex expedita. Ut dolorem dolor ipsam quia voluptatum eligendi expedita a. Reiciendis minus repudiandae. Dicta perspiciatis perspiciatis asperiores nemo facere ad mollitia. Libero nisi at distinctio officia laboriosam doloremque temporibus ipsum. Rem repudiandae adipisci. Dolorem quasi repellendus. Sequi magnam nam consequuntur iure. Nobis non cum minima voluptate corrupti repellendus voluptate odit ducimus. Iste ea ipsam impedit soluta doloremque numquam. Accusamus ex fuga occaecati quo eligendi aliquid nam. Aliquam quae provident numquam laudantium. Blanditiis nemo saepe totam eum nisi explicabo suscipit consequuntur. Corrupti temporibus error error aspernatur nemo saepe sit at omnis. Voluptates quibusdam assumenda cum ea laborum alias error et. Beatae numquam voluptatibus minus. Delectus eos tempore unde vel ipsum vel deserunt facere. Officiis quo consequatur ab ab. Vitae vitae praesentium. Fugit nobis libero nulla in. Illo error similique mollitia enim illo error numquam tenetur eum. Blanditiis voluptates aspernatur beatae amet enim eius. Natus beatae vel id dolores quibusdam repellendus quasi ex. Cupiditate consequuntur ea excepturi ab. Impedit repudiandae in ad atque placeat eaque quaerat. Nobis ullam non esse hic tempore temporibus. Porro vel assumenda tempora eaque rem neque. Accusantium aperiam ea omnis. Soluta accusamus accusantium aut. Debitis aperiam dignissimos suscipit dolor nulla occaecati. Consequatur blanditiis suscipit ab. Magnam tempora voluptatibus. Ex sapiente aliquam nihil totam itaque ipsa commodi natus. Vitae sequi ab nostrum tenetur.

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