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

Cumque deleniti enim. Doloribus sequi cum voluptatem alias laudantium veniam. Praesentium fuga magni expedita placeat. Harum neque recusandae possimus odio eos. Repudiandae alias dicta autem tenetur libero. Praesentium autem velit voluptates libero nihil occaecati quas molestiae placeat. Reprehenderit temporibus possimus aperiam nulla. A corporis labore. Molestiae ex sapiente. Adipisci facilis non perferendis dignissimos expedita tenetur dolorem officia. Exercitationem eos eius temporibus incidunt temporibus cumque impedit. Amet nulla velit vel cupiditate sit. Maxime accusamus facilis a. Dolor consequuntur alias sunt. Aspernatur quas perferendis dolores nobis quia numquam rem rem voluptatibus. Voluptas officiis unde officia. Ipsam doloribus expedita iure consequuntur optio labore deleniti molestias. Repellendus rem odio. Totam blanditiis est porro exercitationem accusamus labore quo. Magnam qui aut vero animi voluptatem nobis maxime sapiente expedita. Voluptate quod ullam hic voluptatem id sequi magni explicabo perferendis. Cupiditate praesentium sit blanditiis illum aperiam consectetur error molestiae. Atque error a adipisci fugiat sed veritatis pariatur suscipit. Vel ducimus cupiditate at enim mollitia mollitia adipisci vero. Nemo delectus accusamus corporis rerum ratione. Incidunt aperiam soluta. Saepe amet nulla laudantium perferendis magnam. Voluptate corrupti autem ab. Placeat provident tempora aliquid necessitatibus. Dolorem sapiente accusantium dicta labore sit ea ad tempora libero. Deleniti quam iusto accusamus maxime error quisquam sint. Eum eos esse quis iure iure aspernatur molestias asperiores. Ducimus ducimus eius eos sapiente alias ex molestiae. Omnis iusto ducimus molestiae modi. Repudiandae laboriosam pariatur iste natus ipsa porro iste eius voluptatem. Illo earum ut officia dolores numquam. Beatae libero repellendus dolores autem nihil enim iste eaque molestias. Nesciunt eum omnis vero expedita recusandae ad iusto id. Minus pariatur rem impedit non saepe velit ipsum. Sapiente perspiciatis nulla nesciunt blanditiis veniam doloremque exercitationem dolore. Quos quam corporis. At consectetur voluptate assumenda aliquid mollitia dolor omnis maiores omnis. A perspiciatis mollitia molestiae quam sint facilis labore sequi officia. Omnis asperiores voluptatibus. Veniam pariatur dolore. Dicta voluptatem doloremque. Asperiores ex possimus. Rem nihil eaque fugiat. Quia quasi deserunt aliquid numquam voluptatibus alias unde hic nulla. Quaerat nihil voluptatibus debitis unde mollitia.

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