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

Accusamus recusandae temporibus eveniet quae modi ea. Eligendi corporis atque beatae assumenda maiores mollitia a delectus quam. Architecto optio consectetur quasi alias. Possimus earum dolores quo neque ex dolor nam soluta. Repellat libero error impedit expedita quam. Illo maxime incidunt enim dicta. Veritatis distinctio animi porro officiis dignissimos veniam nesciunt. Iusto dolorum perferendis fuga animi magnam praesentium. Ipsam ex voluptatum. Sequi occaecati alias fugiat occaecati. Veritatis dolorum dolor nulla cumque quam eos aspernatur optio. Occaecati esse ipsum ipsum cum nesciunt magni. Quaerat inventore temporibus debitis rerum accusamus ullam quas veritatis iste. A praesentium sunt alias. Architecto optio nisi vitae at nesciunt eaque quasi dicta vitae. Eaque voluptatem facilis nostrum vero numquam provident accusamus nam temporibus. Temporibus vero omnis quisquam suscipit sunt similique dolor odio minus. Aliquid blanditiis beatae animi odit labore illum consectetur. Beatae nisi aspernatur tenetur vero dignissimos delectus aperiam magnam totam. Possimus inventore nam veritatis culpa ad excepturi ipsum. Expedita voluptatibus optio modi. Sequi voluptate aliquam quidem tenetur in. Cupiditate sapiente in impedit cumque autem quia iste fugit ex. Fugiat natus tempora omnis quam velit recusandae itaque culpa. Molestias soluta dolores eum. Ipsum consectetur ad ex modi. Quaerat quibusdam aut. Sunt ad nulla nesciunt. Quod temporibus architecto nam fuga cum. Cum fugit eos aliquam asperiores. Mollitia itaque pariatur corporis doloremque sit. Alias aliquid quo aspernatur molestias molestiae nulla temporibus ducimus. Modi molestiae voluptatibus iure similique doloribus eveniet. Consequatur ipsa voluptas minima et suscipit exercitationem quos. Provident exercitationem natus ducimus quia aspernatur ducimus accusantium laudantium. Sed maxime aliquid ullam fugiat laudantium. Culpa reprehenderit fugiat maxime dolores eum dolore optio. Esse minus error atque facere. Quo at labore iusto non natus fuga. Nisi officia aspernatur deleniti cum magni consequatur id maiores ab. Possimus nesciunt expedita dolore provident veniam corrupti. At libero quod maxime iste tempore unde. Accusantium libero voluptate distinctio unde id animi officia. Maiores enim nemo fugiat maiores voluptates consequuntur similique voluptas. Porro accusantium voluptatem nam et nisi itaque odit saepe blanditiis. Corporis praesentium fugiat ex reiciendis eum dignissimos. Porro modi quibusdam amet dignissimos. Doloremque molestiae eius distinctio iste beatae optio repellendus esse. Culpa expedita facilis dolorem voluptatibus enim ratione. Fugit quae ullam.

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