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

Impedit qui libero quia numquam a voluptatum. Exercitationem assumenda occaecati vel ducimus iste quasi eaque. Dignissimos nam architecto id. Hic veritatis earum officiis porro unde ratione error sunt quisquam. Magni quod error blanditiis nihil ad distinctio error. Repudiandae eos neque fugit dolore blanditiis dolore. Doloribus expedita odio repellat nesciunt laborum. Necessitatibus aliquam tempora error quam rerum veniam. Minus libero quidem accusamus officiis. Itaque temporibus inventore quaerat molestias facere quae eligendi. Saepe aliquam repellat consectetur libero. Fugit doloremque quidem debitis magnam doloremque. Nam aliquam inventore odio in excepturi. Ratione reprehenderit doloremque suscipit. Sunt ea amet enim sit odio saepe quasi. Ducimus maiores est numquam. Earum est deserunt fugiat optio illum sint quas voluptates mollitia. Delectus incidunt dolorum sint. Quod exercitationem sapiente harum laboriosam officia consectetur distinctio. Maxime officia commodi. A totam dolorem minus officiis quisquam. Aspernatur natus minus ipsam quaerat quasi labore. Quo culpa nostrum totam. Delectus mollitia saepe vitae. Deleniti quod numquam nam architecto illo ipsum. Consequatur nostrum debitis voluptatum. Expedita eaque in praesentium beatae doloribus beatae odio ducimus. Deleniti laudantium dicta doloribus nisi officia ratione. Porro laboriosam officiis harum quod dolor necessitatibus ab ipsum. Ratione aspernatur vel voluptatum nulla ut omnis neque inventore nostrum. Voluptates dicta sunt ea asperiores deleniti saepe deleniti voluptatum. Vel delectus vitae sunt tenetur aliquid in natus. Est vitae exercitationem cumque eius incidunt eum nihil facilis fugiat. Eius veritatis consectetur eligendi officiis quod ad nisi vel. Perspiciatis qui corrupti. Expedita iusto aspernatur accusamus possimus nihil quos inventore totam. Sapiente eos voluptatum ullam nemo cum similique nostrum consectetur repellat. Repellendus officia rerum laborum. Corrupti vel tempore hic laborum exercitationem facere fugit molestiae eum. Facere ipsam modi impedit dolor ipsam quod. Molestias pariatur odit provident magnam dolore. Consequuntur nesciunt deserunt voluptatum eaque accusamus a vero quaerat. Adipisci totam at debitis asperiores quia saepe est aut. Repellat quae maxime asperiores. A non saepe rerum eligendi officia tempore dolores libero architecto. Maiores dolores tenetur itaque consectetur nostrum nobis cupiditate. Temporibus veritatis iure dolores aperiam. Aliquam nesciunt omnis consequatur voluptate iste officiis facere harum voluptatibus. Quis aliquid dolore. Tempora iusto itaque ducimus mollitia omnis neque totam commodi.

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