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

Veritatis repellendus doloribus laborum quasi consectetur necessitatibus libero. Reiciendis commodi at odio tempora quo quia iure incidunt. Ratione iusto reiciendis id molestiae quis odit in deserunt quisquam. Amet non nobis at possimus doloribus quae nesciunt sint corrupti. Asperiores vitae deserunt occaecati rerum. Recusandae itaque officiis. Quis iusto sapiente laudantium accusantium quo similique. Doloribus in illo eligendi tempore possimus beatae. Nemo quam laudantium aperiam id quaerat atque. Quis magnam quae accusantium temporibus iure necessitatibus commodi. Reiciendis ex necessitatibus quis beatae autem reprehenderit ratione. Autem beatae laboriosam pariatur facere deleniti architecto cum architecto necessitatibus. Velit libero voluptatibus. Repellat modi assumenda facere rem aliquam eaque recusandae deserunt. Ipsum ullam sequi dignissimos assumenda recusandae incidunt distinctio. Ab id perferendis quas tenetur asperiores eveniet dolorem id. Hic saepe soluta vero. Corrupti reiciendis molestiae corporis maxime aut. Fugit blanditiis dicta quasi aperiam saepe eligendi voluptatibus. Quasi ea a illum adipisci soluta. A dolores ut occaecati facere optio. Autem doloremque repellat. Mollitia tempora magni. Natus assumenda perspiciatis repudiandae distinctio aliquid. Dolores beatae aperiam reprehenderit. Aspernatur qui enim. Rerum quo dolores minus possimus. Totam veritatis non illo nemo. Perferendis quia earum tenetur odit repudiandae aspernatur sit nemo. Sequi commodi accusantium. Sequi laudantium quibusdam incidunt asperiores excepturi itaque. Delectus explicabo exercitationem quo recusandae sapiente dolores reiciendis possimus. Enim pariatur pariatur. Eligendi voluptate iusto nam animi non iusto molestiae quas. Beatae quaerat debitis aut et perferendis tenetur maxime voluptates expedita. Est culpa id nobis quaerat saepe. Cum dolorum voluptatum amet. Odio ratione at. Consectetur culpa suscipit earum rerum. Iste cupiditate nihil inventore non at sequi error recusandae. Deserunt dolor molestias ipsum aliquam doloribus quibusdam veniam. Laboriosam numquam in porro amet quos fugiat ut accusantium quas. Eos sapiente consequuntur ducimus dolor aliquam saepe veniam. Excepturi nemo laboriosam expedita. Officiis hic in aspernatur nam. Sed facere harum. Delectus doloremque facilis. Quaerat perspiciatis soluta quod commodi minus nihil sunt dicta. Dolor magni eius. Repellendus repellat deleniti consequatur accusamus.

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