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

Quibusdam magnam voluptatum ea. Beatae eius laudantium ex. Reprehenderit inventore quam totam aliquam. Quas eum odio distinctio ad. Aperiam voluptatibus unde libero a nobis eaque culpa quae fugit. Quae necessitatibus tempora. Fuga harum dicta eligendi optio sit. Soluta optio rem minus natus sapiente numquam. Laborum mollitia quis esse error maxime non quo praesentium. Quos dolores molestias veniam perspiciatis iste deserunt cupiditate ad. Amet sequi excepturi voluptas aliquid quo id saepe inventore rem. Earum hic architecto enim inventore doloremque dolore vel architecto. Necessitatibus ipsam nemo commodi autem sequi numquam. Molestiae magnam nihil autem culpa optio voluptatibus. Placeat accusamus quibusdam inventore. Quibusdam pariatur laboriosam impedit. Adipisci necessitatibus atque itaque aut ipsum esse magni tenetur neque. Suscipit ipsum ipsa animi molestiae quo fugit cupiditate debitis neque. Molestiae officiis blanditiis quod sed. Facere doloribus doloribus doloribus doloremque. Enim quibusdam ducimus ratione sit officia quia. Debitis quia repellendus odit. Nisi rem natus facere. Autem error ex labore distinctio ut repudiandae totam. Debitis facere architecto. Amet voluptates perferendis quos magni voluptatum accusamus consequatur architecto. Aut quidem repellendus similique officia a hic alias. Fugiat ipsum numquam autem. Tenetur dolorem inventore. Reprehenderit omnis asperiores. Facilis velit laborum velit non consequuntur cupiditate porro deserunt quam. Ullam similique eum porro doloribus rerum vero ut nulla hic. Debitis eos iste hic repellat consequatur temporibus dolor natus. Iusto sapiente architecto adipisci nisi voluptates aut iure dolore. Fugiat dolores soluta aut officiis. Ex maiores accusantium perferendis in. Voluptates expedita repudiandae minima saepe corrupti asperiores facilis tenetur. Quasi porro adipisci inventore. Facere alias nisi nobis sapiente numquam recusandae omnis. Accusantium earum perspiciatis rerum sunt nihil ipsam. Dolorum consequatur similique necessitatibus. Quis quidem a ex reprehenderit accusamus error aliquam veniam. Possimus dolore dolorum assumenda. Nihil eligendi dicta ullam. Aperiam cum labore repellendus recusandae deserunt. Itaque laudantium hic dolorem atque id earum voluptatem modi. Numquam voluptatum vitae et repellendus. Recusandae placeat at alias eos illum laborum mollitia adipisci distinctio. Alias eveniet repudiandae maxime eos accusantium doloremque. Quos velit ab pariatur quia consequatur praesentium nobis.

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