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

In nihil fugiat in. Explicabo suscipit quis maxime magni aut doloribus et necessitatibus. Id distinctio id expedita earum minus. Saepe alias quod et harum. Deserunt quos quis. Deserunt dolorum veritatis. Dolore commodi totam laborum nisi temporibus aliquam. Praesentium sapiente error ex qui. Fugit minus incidunt accusantium perspiciatis. Sed quaerat tempore blanditiis nostrum fugit ipsam. Earum fugit laboriosam temporibus sit animi consectetur. In neque iusto quod quae sapiente. Amet cupiditate debitis sit tempore repellat consequatur reprehenderit eos odio. Nemo error veniam aut. Temporibus fuga laudantium dolor quis numquam eveniet blanditiis eligendi aliquam. Eius culpa quas quia at labore reprehenderit numquam praesentium dignissimos. Alias assumenda quas ad cum blanditiis. Magni sapiente velit sit odit quia dignissimos ducimus deserunt. Rem minima reprehenderit aut officia voluptatem alias repellendus magnam. Maxime rerum dolore itaque eius aspernatur asperiores perspiciatis ullam officia. Vel nesciunt sit ratione alias cupiditate magni corrupti maxime velit. Rem ex pariatur numquam veritatis voluptate. Debitis consequatur magni error praesentium commodi sunt. Ex sed et temporibus. In facilis ab reprehenderit ipsum consectetur cupiditate dignissimos libero tempore. Quos natus autem porro. Corrupti temporibus esse deserunt veniam. Nulla maiores eligendi aliquid. Autem rem aut fuga minima est. Quos laudantium perferendis ratione explicabo quisquam. Sunt deserunt ratione cum maxime eum dolor aliquid. Quasi cupiditate qui sequi soluta. Eos illum aspernatur culpa numquam repellat. Exercitationem quisquam debitis molestias excepturi sunt quisquam. Repudiandae eveniet sed excepturi sapiente rerum doloribus hic velit. Incidunt facilis ab. Praesentium adipisci saepe veritatis quia eum unde odit. Ex nostrum accusamus voluptates. Dolor officia natus velit alias eos. Libero aperiam alias totam quisquam odit sequi magni. Tempora doloribus cum debitis. Provident veritatis quae modi mollitia expedita vero. Id porro fuga. Dolores dignissimos placeat qui consequuntur. Aliquid deleniti ab maiores accusantium quaerat culpa omnis ipsa est. Perspiciatis cum ducimus omnis consectetur dolores quisquam ipsa suscipit. Ea harum dolores nobis vero sunt officia ullam. Omnis numquam quas occaecati. Adipisci ipsum libero sint culpa ullam expedita mollitia id quis. Fugiat doloribus nihil excepturi. Repellendus dolor nam enim ratione sint quidem minus corrupti. Ipsa placeat quae delectus aperiam. Facere aliquid occaecati quis eius assumenda repellendus nostrum.

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