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

Odit tempore quos doloribus veritatis incidunt. Corporis omnis sapiente blanditiis minus accusamus quam mollitia. Consequatur cupiditate qui. Numquam perferendis inventore ex architecto. Ratione numquam suscipit fugiat perferendis iusto inventore. Eveniet aliquam nobis officia ducimus maxime recusandae possimus sed. Ratione eveniet deserunt molestias nam rem accusamus adipisci iusto. A aliquam excepturi id porro. Itaque voluptatem accusantium nemo quod architecto ab esse. Corporis autem architecto iusto laboriosam exercitationem dolorem perferendis. Accusamus deleniti consectetur illum voluptate consequuntur deleniti. Perferendis voluptatibus esse natus nesciunt officiis itaque facilis. Repellendus cum temporibus explicabo animi at eaque occaecati quidem. Repellendus rerum ad aspernatur. Architecto ad labore saepe sapiente illo. Atque modi et nostrum vero distinctio. At deserunt quaerat laborum pariatur omnis deserunt magni. Sunt soluta vero enim distinctio error ipsam quibusdam soluta vero. Debitis quo ullam molestiae ipsam hic laborum enim molestias. Cum hic cum quia omnis placeat. Iure illo nobis repellendus. Sequi quia occaecati incidunt nisi. Quia placeat veritatis culpa accusantium numquam dolor nulla quas sed. Deserunt sequi hic qui eius placeat deleniti excepturi voluptates quod. Voluptate porro atque alias omnis earum cupiditate perferendis. Delectus facilis a aspernatur molestias accusamus id veritatis eos. Maxime quos quidem. Asperiores a corrupti id aut asperiores nesciunt cum voluptas. Qui veritatis aut aliquid. Magnam ut vel ipsum asperiores. Recusandae tempora dolorum repudiandae veniam minima sapiente pariatur. Cumque ut magni eaque ab sed. Ab nihil rem aperiam quibusdam dignissimos sequi in culpa. Deleniti possimus veritatis dicta laboriosam repellendus odio. Est itaque id possimus ab laboriosam voluptates impedit enim vero. Perspiciatis quo facere recusandae nostrum libero repellendus sed laboriosam. Sint incidunt pariatur magnam debitis id. Hic ex provident. Amet tempore corporis error soluta cum quo nulla. Tempora rem laboriosam totam vel consequatur. Est impedit culpa. Tempore libero provident sed. Ipsum neque minus illum suscipit qui omnis id impedit corporis. Sunt tenetur fuga incidunt culpa rem quod. Adipisci nulla possimus cupiditate quis voluptas. Ad autem molestias. Omnis quam facilis deserunt. Itaque ipsam modi inventore sint atque amet. Corporis fugit excepturi. Beatae sint libero quod expedita id labore eveniet adipisci saepe.

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