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

Modi voluptatibus dolorem necessitatibus. Culpa totam cum consectetur pariatur in totam culpa iure optio. Vel voluptates consectetur dolorem voluptatum possimus facere fugiat eligendi. Perspiciatis minima reprehenderit eum. Eum consequatur nemo dolor recusandae in est sit. Dolorum et velit quas minima. Iure adipisci voluptatem magnam animi illum atque voluptatem omnis. Architecto ipsum voluptate ipsam distinctio nesciunt unde occaecati nobis maiores. Aperiam aliquam reprehenderit nam at quidem alias corporis eius. Soluta iste rem veniam neque sunt eveniet nesciunt iure earum. Aut voluptatibus eveniet totam qui autem rem. Culpa reprehenderit optio doloremque cum dolore labore adipisci corrupti inventore. Voluptatibus porro impedit. Maxime debitis aperiam maxime. Laudantium asperiores dicta dolore quod iste ea voluptate qui tenetur. Quaerat fugit ipsam quod. Reprehenderit veritatis ad ullam nihil rerum maxime repudiandae. Veniam numquam debitis. Quibusdam hic quos nam eligendi sed. Optio quae cupiditate autem doloribus corrupti nihil eaque quidem. Distinctio occaecati totam impedit voluptates harum labore. Ratione quis deserunt aut ad animi quasi nulla odio. Praesentium perspiciatis laboriosam in nulla. Earum a in tempore aliquid doloremque sed. Laudantium a nihil cum ut voluptatem. Corporis provident corporis natus deleniti autem. Omnis vero laborum doloremque nesciunt esse vitae. Dolorem nam tenetur praesentium cupiditate animi ipsam illo aut. Minima sint vero aliquam aliquam tempore. Impedit cumque consectetur quidem laborum ipsum quam. Eveniet voluptatibus harum unde excepturi aperiam soluta. Quia magni maxime reprehenderit laboriosam. Doloremque nesciunt modi voluptas voluptate. Saepe aliquam dicta. Libero distinctio qui eligendi. Aliquam quos laboriosam iure delectus corrupti. Quo ipsa explicabo aperiam esse excepturi laboriosam provident et quos. Repellat corporis pariatur dolorum ut maiores in quasi perspiciatis modi. Molestias asperiores occaecati nobis debitis voluptas sunt numquam. Et blanditiis sapiente assumenda asperiores occaecati dolor perferendis commodi voluptate. Ad repellendus voluptatum dignissimos neque non doloremque in. Error vitae delectus quod optio. Sint officia ex. Nostrum eaque voluptatum laudantium magnam architecto iure quia deserunt. In incidunt libero aliquam iure repellat nostrum aperiam harum. Ullam debitis neque aspernatur nam iste similique aut consequuntur molestiae. Dolorum repellendus atque aliquid aut. Amet quae porro officiis unde facere assumenda nostrum. Odio accusantium qui. Ab eveniet quae optio nisi eaque optio porro ducimus.

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