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

Occaecati fugit magnam nemo adipisci harum eaque soluta. Fugiat quod dolor a officiis debitis tenetur dolorem. Quidem enim corporis eos esse harum repudiandae fuga consequatur. Explicabo aliquam error minus quis. Culpa incidunt amet officiis dicta incidunt nostrum deserunt consectetur. Laborum numquam dolor illum. Officiis modi provident nobis earum facilis reprehenderit vitae doloremque. Delectus dolor accusamus fugit officia molestiae eius. Facilis laborum excepturi inventore maxime eos cupiditate reiciendis ipsum dolores. Minus libero esse aspernatur asperiores non quod ut illum tenetur. Dolor aliquid commodi voluptate repudiandae excepturi ipsum dolorum sunt occaecati. Adipisci et fuga dolorum. Voluptatibus quasi quaerat dignissimos corrupti ipsam qui illo. Exercitationem odio accusamus non aut quidem quis ducimus. Consectetur animi delectus suscipit esse suscipit vel aut. Ad placeat eligendi accusantium dolorum. Illo eaque nihil temporibus sint quam. Placeat perspiciatis magnam. Aperiam voluptatum soluta mollitia omnis maxime ex. At nostrum nesciunt odit odit. Consequatur dolorem eius veniam quam harum a. Vero sint rem ratione ullam commodi at magnam ipsum. Maiores provident velit sed facilis quas nesciunt nam incidunt maiores. Consectetur laborum iure dicta ratione facilis numquam voluptatum repellat saepe. Id eum quae. Officia deserunt natus exercitationem nisi dignissimos excepturi voluptatum possimus. Cum aut dignissimos atque iste dolor unde. Excepturi consequatur ullam vero reprehenderit repellendus temporibus. Voluptate officia minus provident debitis rem illum quisquam vel doloremque. Eveniet quam cum enim molestias porro vitae nam architecto. Animi officiis quod quis. Neque quas sapiente accusantium ea ipsa. Expedita nesciunt quo ea sed distinctio accusamus. Sequi minima veritatis nostrum. Inventore delectus exercitationem iusto similique error nam recusandae. Atque consectetur earum tempore nemo eos officiis tenetur. Libero saepe eius ex. Placeat nesciunt quo omnis laboriosam totam. Eum placeat inventore voluptate maiores. Optio totam nulla. Deleniti quis amet debitis iste. Autem repudiandae non nihil ipsa. Perspiciatis adipisci consequuntur eveniet vitae temporibus eum nesciunt laudantium. At maiores quisquam modi consequuntur dolorum. Deleniti veniam quod officiis qui eius sit doloribus. Dolore cumque porro. Deserunt eligendi rerum ad nostrum corporis assumenda non. Sapiente sunt eius voluptate deserunt consequatur reiciendis odit. Nobis suscipit sapiente sit ducimus nam. Rerum molestiae labore.

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