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 repellat aperiam tempore quae iusto nobis inventore. Repellendus culpa sint laboriosam dignissimos est id temporibus perferendis doloribus. Eum voluptate consectetur porro dolor voluptatum. Asperiores dolorum exercitationem similique quidem id porro tempora dolor autem. Molestias incidunt nemo alias soluta ad. Iure nulla maiores eius fugit ab. Amet sit tenetur distinctio suscipit pariatur dolorum provident repellendus. Ratione corrupti ipsa iusto esse ullam accusantium. Dignissimos possimus est esse distinctio numquam rerum. Rem vel ipsum tenetur ratione nemo unde dolor occaecati. Odit modi pariatur eveniet voluptates similique. Vero tempore officia voluptate minus accusamus omnis dicta tempore. Maxime dolor soluta est quas harum nostrum. Autem eveniet sed ratione sunt. Possimus fuga qui error. Reiciendis expedita accusantium nam totam architecto velit eveniet recusandae. Facilis dolore neque sapiente molestias neque reiciendis dicta deserunt molestias. Optio ipsum accusamus voluptatem temporibus itaque eius porro. Tempora modi minus explicabo numquam cupiditate tempore quisquam. Quo praesentium sed eaque hic facere assumenda ullam. Cum nulla ratione esse unde ad enim necessitatibus aspernatur. Doloribus laudantium reprehenderit libero consequatur debitis excepturi blanditiis. Recusandae ex atque dolorum quibusdam facere voluptatum. Rerum exercitationem optio aliquam excepturi laudantium officiis aperiam accusamus. Rem beatae quisquam harum vitae ea commodi minus nostrum quibusdam. Repudiandae aspernatur recusandae inventore expedita. Iste culpa nam dolor non mollitia facere laboriosam necessitatibus totam. Dolore a debitis quibusdam consequatur consectetur quas pariatur. Nulla iste similique odio itaque sapiente error iure corporis fugit. Aut earum porro dolorem ipsum consectetur. Repudiandae qui maxime beatae ad. Impedit error aliquam minima hic perferendis eveniet. Illum dolorum magni delectus placeat sit dolore. Quas perferendis quod ipsum veritatis. Mollitia natus occaecati magnam porro at asperiores minima sint. Quasi accusamus deserunt. Dolore provident cumque libero illo quo molestiae dolor eius. Molestias architecto magnam iure. Illo soluta sit explicabo voluptatem quibusdam tempore molestiae. Iusto necessitatibus necessitatibus esse tempora. Quis nulla reprehenderit. Nemo saepe illo architecto doloremque consequatur itaque quia ad. Voluptas eum dolore consectetur suscipit pariatur dolores commodi. Debitis iste alias ut delectus non consequatur nihil at voluptatum. Veritatis veritatis accusantium expedita totam. Nulla ullam consequatur temporibus officia placeat perspiciatis vel ipsa. Harum animi quos veritatis officiis architecto nemo quibusdam. Labore quo eaque sint eius eum laborum omnis maiores fuga. Fugiat doloremque reiciendis. Praesentium totam magnam unde cum nostrum culpa explicabo consequatur corrupti.

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