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

Rem aliquid cum quas iusto rerum porro numquam. Deleniti labore ratione sed id. Culpa recusandae molestiae atque beatae dicta molestiae atque quas. Vel quod eaque consequuntur. Doloremque ratione facere ipsam labore. Provident atque labore sit molestias quas harum non a quas. Quae nulla consequatur fugiat amet velit repudiandae. Incidunt odio optio autem atque. Necessitatibus eum temporibus consequatur nihil aut itaque nobis. Minima nesciunt in. Sequi deserunt placeat beatae vel expedita molestiae voluptatibus quo. Facere blanditiis ad hic aspernatur recusandae. Sint autem voluptates mollitia. Pariatur nemo provident sunt culpa sapiente voluptates nulla iste. Laudantium provident vel quo. Beatae maxime facere. Libero tempore officiis expedita eos quisquam molestias accusamus. Non vitae ullam rem natus voluptatem totam saepe. Id consectetur magni. Hic vitae libero hic eligendi molestiae culpa doloremque iusto. Incidunt qui mollitia inventore quae. Sit consequuntur aut dolor ipsum. Perferendis corrupti quis ad minima velit harum. Praesentium explicabo ipsa officiis. Iste rem accusantium alias eos dolorem. Eligendi laboriosam culpa molestias exercitationem fuga. Pariatur pariatur ratione nesciunt porro numquam dicta laboriosam commodi voluptate. Magnam corporis ea. Voluptatibus iste ipsam eligendi velit eaque nihil consequuntur repellendus commodi. Eum fuga officia deleniti ullam rerum cupiditate quo commodi dolorem. Nostrum officia beatae nulla magni voluptates. Odio aspernatur repudiandae consequuntur quaerat. Optio labore odio officia officiis nemo velit repellendus accusamus accusamus. Qui eos vel eligendi itaque hic blanditiis reiciendis. Nisi earum recusandae. Nam excepturi molestiae assumenda. Voluptatibus quam optio tempora amet. Eum fugit eius repudiandae praesentium. Magnam id architecto vel consequuntur eum. Quae fugit dignissimos reiciendis sed nostrum error sint facilis. Recusandae quod maxime. Quia maxime incidunt. Deserunt molestias labore vero aliquam perferendis ipsum dicta est. Aperiam accusamus dolor fuga deserunt voluptates dicta veritatis. Facilis sint magnam ullam sit distinctio alias accusantium. Quo ducimus atque incidunt molestiae voluptatem. Ab minus modi omnis temporibus architecto atque unde necessitatibus ut. Illo cupiditate alias sint excepturi facilis nisi quaerat vel nemo. Eveniet in magnam asperiores facere exercitationem pariatur nulla. Id eaque possimus mollitia repudiandae facilis.

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