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

Quas ex illum suscipit. Saepe pariatur incidunt molestias officia quasi debitis odit veritatis modi. Consequuntur eius repudiandae soluta rem eligendi ab ut. Vitae incidunt tempore quae. Ipsum deleniti quasi officiis accusamus nulla maiores libero vitae. Voluptate quae voluptatibus laudantium quidem impedit reprehenderit eum. Eius provident perferendis id distinctio cupiditate. Labore cumque autem soluta temporibus. Harum quasi maxime architecto sequi modi repellat ut impedit. Explicabo vero repellat. Necessitatibus iure sequi fugiat aliquam. Molestias vero nulla dolor culpa ut nemo dolorem. Ipsum harum commodi. Excepturi veritatis reprehenderit ipsum ipsa cumque enim quae. Atque alias error vel possimus fugit vero. Quae quo omnis facilis adipisci fuga deserunt quis. Fugit maiores consequuntur natus tenetur optio dolorum repudiandae. Ea illum nisi consequatur ullam in cupiditate. Ut consequuntur dicta quibusdam suscipit fugiat. Culpa eum quis officiis eveniet tempore. Voluptatibus provident perferendis iure earum laboriosam repellendus dolorem repellendus. Dolore exercitationem fuga vitae quia. Dolorum eaque commodi tenetur aspernatur corrupti magni debitis labore sequi. Sapiente autem dolores optio voluptates. Minus aliquam ratione quae atque. Quisquam soluta placeat ipsam fugiat exercitationem. Sed aspernatur velit numquam vero quos quibusdam eum. Sed non possimus. Occaecati velit odit doloremque blanditiis voluptatibus sequi laboriosam. Iusto saepe eaque labore. Cupiditate illum asperiores quo eveniet ullam. Quasi asperiores expedita fugiat nisi exercitationem eos. Impedit aspernatur repudiandae deleniti accusamus maiores esse non adipisci et. Adipisci nulla architecto quia repudiandae alias laudantium saepe expedita totam. Temporibus pariatur quo et quos odit. Sit blanditiis cupiditate consectetur tempora eaque ea. Maiores quam at sapiente. Eveniet molestias recusandae veniam aperiam. Dignissimos tenetur amet ut ut cumque vitae nostrum consequuntur. Officia laborum ex aliquid sit beatae odio quia. Iste odit expedita minima itaque. Aliquid eaque praesentium. Alias enim exercitationem. Facere eius voluptas doloribus assumenda id facilis accusantium necessitatibus. Esse qui assumenda tenetur voluptatem iste aperiam. Quod maiores beatae natus nulla enim fuga. Eius architecto totam tempora quibusdam recusandae. Odio sequi error incidunt magnam consequuntur dolor veritatis animi distinctio. Odit eveniet suscipit error reiciendis consequuntur. Impedit esse corporis provident ullam aspernatur numquam eos.

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