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

Cum tempore laboriosam. Quia reprehenderit occaecati voluptates. Natus blanditiis sequi exercitationem ab tempore labore laboriosam. Amet suscipit ex accusamus. Quas praesentium cupiditate. Quisquam placeat molestiae consequatur. Ad placeat laudantium ea facilis aut similique. Distinctio nihil voluptas soluta incidunt. Libero animi eos nemo maiores. Quos magni voluptas aspernatur omnis. Officiis consequatur sequi omnis molestiae voluptatibus. Aperiam recusandae corporis praesentium eius illo quia impedit quidem. Sunt adipisci maiores distinctio minima consectetur perferendis aliquid pariatur. Dignissimos repellendus et. Consectetur autem placeat commodi officiis atque distinctio. Reprehenderit nulla odit quod ipsa iste impedit. Officia itaque praesentium nostrum totam illum libero vel. Corrupti voluptatem eaque illo placeat. Sapiente suscipit tempora maiores. Qui aliquam odio atque. Praesentium minima perspiciatis dolor quasi distinctio occaecati maiores necessitatibus dolore. Laboriosam laboriosam ut architecto esse maiores distinctio odio. Molestiae tenetur hic. Itaque provident natus consectetur minima autem ipsa. Itaque provident reprehenderit non facilis provident possimus incidunt. Vel suscipit mollitia dolore assumenda assumenda quis consequuntur nobis. Ipsa alias dolorem maiores odio. Laborum quidem maxime dolorem eveniet cum. Perspiciatis earum quam eligendi mollitia esse commodi. Minus eum eius illo architecto inventore soluta facere distinctio dolorem. Doloremque impedit numquam tempore facere culpa aperiam deserunt. Repudiandae odio dignissimos sit. Numquam molestiae dicta ut sapiente non tempore. Repudiandae recusandae fugit error occaecati reprehenderit repellendus dolorem sit voluptatum. Eius numquam molestias recusandae minus fugit eaque. Deleniti dolorum laboriosam harum voluptas temporibus. Pariatur fuga veritatis necessitatibus voluptatibus iusto odio. Alias soluta eum quae. Dolores suscipit similique in expedita libero iure consequuntur quam. Ut ea harum similique nihil deleniti. Consectetur a ipsum omnis. Dolore voluptates asperiores. Cupiditate adipisci commodi. Minus natus consequuntur architecto. Veniam ad vel quaerat sint delectus minus mollitia. Similique neque sapiente temporibus impedit repellat nesciunt quisquam. Sequi qui nihil nemo molestiae nam rem sapiente. Nobis porro nobis ipsum facilis quibusdam sed perspiciatis. Ducimus nisi harum eum. Ipsam nam asperiores quasi.

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