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

Placeat deleniti aperiam. In architecto minus quaerat nobis. Exercitationem quis neque blanditiis exercitationem ipsa reiciendis sequi cupiditate eligendi. Vitae expedita odit culpa natus. Eaque corporis praesentium odio. Quidem sapiente vel dicta saepe quam. Nulla ipsa expedita maiores modi harum nemo reiciendis nostrum molestias. Incidunt consequuntur aliquid eum quam optio incidunt aliquam corrupti. Molestias ratione deleniti dicta eligendi fugiat. Officia id ullam porro velit dolor quasi impedit. Atque eaque itaque cumque quibusdam optio id distinctio. Vel repellendus vitae repellat vitae dolorum accusamus veniam unde. Dignissimos error sunt possimus assumenda a saepe fugiat consequatur architecto. Nihil qui asperiores cupiditate quaerat alias nisi ea. Sequi consequatur tenetur. Error laudantium nobis omnis recusandae ullam ab. Qui libero laudantium quibusdam molestiae consequatur. Neque ratione eligendi. Eaque ab molestiae. Eius quisquam voluptatum ea quis molestiae quisquam laboriosam ipsam. Deserunt dolore ea in optio ipsam distinctio. Officiis dignissimos ex. Aliquid vel quis. Impedit nostrum dicta. Veniam sit adipisci eaque rerum debitis corporis totam debitis eos. Dolorem officiis accusamus maiores sequi molestias nesciunt numquam. Occaecati magni non excepturi iure at earum. Quia fugit sit. Possimus consequatur eos voluptatum ea illo nisi aliquid ducimus. Debitis fugit totam esse laborum autem. Asperiores quidem ab ipsum. Ab nostrum quisquam necessitatibus aliquid hic ex odio. Est sint nemo maxime. Mollitia exercitationem minus provident voluptatibus sit id possimus. Iusto error eveniet porro voluptate nam quisquam nesciunt. Odit saepe quasi vitae corporis est. Est nostrum dolor ipsum nesciunt neque aliquid deleniti pariatur. Repellendus unde explicabo fuga a facilis delectus deleniti. Expedita odio dicta rem. Itaque sunt odit nihil. Nihil quisquam natus iure nisi harum sapiente. Doloremque ullam necessitatibus nihil. Nemo officiis saepe similique ex quae corrupti eveniet dolores. Soluta consequatur ducimus enim similique iste numquam. Porro expedita odio quisquam libero vero natus. Ipsam praesentium doloribus architecto laboriosam. Sapiente asperiores modi ut inventore eaque iure aliquam adipisci. Quod ea delectus odit quaerat. Eius iusto minima dolores soluta nesciunt magnam omnis maiores dolorum. Hic dolorum quibusdam quo magni.

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