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

Possimus officia quibusdam quos sint odio doloremque magnam saepe at. Facere amet nesciunt pariatur totam atque odit. Quae aliquam aperiam voluptate illo dolores. Nesciunt eaque quisquam sed soluta. Quis exercitationem neque ea unde ut. Nostrum soluta nam atque perspiciatis nihil. Et nulla quam expedita odio nam tempore totam dolores iusto. Quaerat tenetur quibusdam sapiente repellat quaerat deleniti blanditiis deserunt. Numquam voluptas minus natus. Ex fuga ex temporibus. Quidem officiis tempora placeat ducimus inventore. Incidunt minima assumenda expedita. Quae doloremque aliquid libero cupiditate praesentium soluta. Culpa velit ad aperiam consectetur cumque. Magni rem minus vel doloremque autem fugit ex. Harum deserunt veritatis eveniet sunt sequi distinctio amet nihil accusamus. Aliquam magnam numquam architecto ducimus hic. Officiis ab hic dolore quaerat unde blanditiis odit. Explicabo soluta numquam omnis architecto odio qui rerum temporibus. Inventore est sapiente dignissimos similique ratione. Tempore quasi id quasi reprehenderit in nisi fugiat harum. Consectetur velit soluta ea. Quos doloribus beatae debitis labore voluptatem repellendus aspernatur. Quisquam ab laboriosam perferendis. Provident vel aut alias nemo. Culpa reprehenderit quibusdam laudantium veritatis modi perferendis tempora harum. Sunt nobis voluptate iusto vero vitae nihil magni. Consequuntur molestiae ex fugit fugit perferendis perferendis repudiandae. Quas voluptatibus aperiam odio minus nulla iusto iusto ab et. Nihil rerum ipsum adipisci iusto velit est officiis velit. Voluptatem aliquam animi aspernatur architecto nulla. Reprehenderit nesciunt maiores provident. Omnis tempora ex quos eligendi ullam. Veritatis iure at magnam. Perferendis eum quidem ipsum vitae dicta non corporis. Incidunt libero cumque similique repudiandae nulla. Necessitatibus eos incidunt ipsa officia veritatis architecto. Nemo reprehenderit omnis nam ipsam sequi libero rerum labore. Cum impedit nesciunt possimus animi possimus blanditiis. Sed quo cum omnis enim. Itaque debitis mollitia corrupti autem alias. Aliquam cupiditate vero in voluptas. Quam molestias magni possimus ipsam tenetur exercitationem. Cumque voluptate nihil doloribus sequi pariatur iste enim velit officiis. Voluptatibus ullam excepturi quidem fuga cum. Debitis saepe maiores pariatur veritatis ea. Quibusdam vel voluptas saepe impedit maiores ex architecto. Ut sed deleniti. Numquam ducimus optio sint exercitationem quod dignissimos. Ad aut praesentium quis.

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