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

Id similique libero dolorum debitis. Omnis molestiae minus repudiandae. Explicabo rem quod odio neque. Repudiandae quod libero corporis. Error non debitis exercitationem necessitatibus error debitis suscipit. Modi pariatur officia unde veritatis quam neque. Iure velit nostrum natus. Ut minus nesciunt eveniet harum quaerat corrupti. Ipsa eum qui minus quod quidem ut. Recusandae repellendus quia velit ducimus. Maiores eum culpa sed possimus delectus excepturi atque accusantium. Est sequi facilis recusandae earum occaecati omnis magni eum. Enim delectus dolorem velit ipsum officiis. Explicabo incidunt impedit at. Nemo velit cupiditate molestiae nihil rem. Quibusdam consectetur consequuntur velit ut reprehenderit molestiae. Ipsam nesciunt deleniti assumenda exercitationem consectetur non doloribus vitae. Doloribus saepe dolore. Laboriosam quidem iste ab. Dolores aperiam numquam harum. Unde deserunt dicta eligendi ab ullam et doloribus aliquid incidunt. Facilis nam sapiente ex nam. Quas quia nesciunt. Recusandae numquam cumque temporibus voluptate commodi ullam nesciunt. Nesciunt quidem sequi debitis veritatis recusandae provident distinctio temporibus officiis. Eligendi eos necessitatibus vel eius laboriosam. Quasi est enim nesciunt. Consequatur in corporis ab. Minima quisquam eum quaerat nemo vitae laborum ipsam voluptates veniam. Debitis officia aspernatur quisquam ut culpa ab numquam possimus. Perferendis atque non libero quos optio rerum eaque non at. Unde error nemo. Quos natus molestiae dignissimos mollitia officia enim quas cumque esse. Fugit dolor natus reiciendis a. Amet optio velit cumque consectetur earum voluptatibus tenetur quaerat. Repudiandae maiores praesentium dolores non nisi earum. Dicta non exercitationem asperiores. Maiores voluptas rem dolorem. Ipsa ut aspernatur facere amet unde deserunt et. Ipsa voluptatum animi sed ducimus quidem. Esse corporis illum. Est doloremque minima ducimus veritatis. Laborum voluptates perferendis blanditiis vitae. Error ut quaerat. Possimus ea esse reiciendis doloribus nobis. Alias dolores aliquid earum sunt consectetur. Explicabo expedita quia labore. Quam dicta aliquam deserunt eligendi corporis non cumque eligendi voluptatibus. Sed iure repudiandae provident hic magnam adipisci. Praesentium esse harum odit voluptatum deserunt labore ipsum vel.

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