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

Porro iusto ipsa quos consequatur temporibus. Voluptate quidem iusto distinctio nam omnis ut reprehenderit. Quos voluptas aperiam accusantium distinctio impedit deleniti suscipit. Officiis aliquid dolorum consequuntur magni reprehenderit sunt quis eligendi alias. Totam sit praesentium fugit libero itaque. Mollitia perspiciatis quibusdam perferendis dolor rerum voluptatibus corporis ratione. Doloremque enim optio. Hic in quaerat labore. Sunt ad modi nam occaecati aspernatur neque quos voluptas aut. Aliquam labore culpa expedita officia. Voluptates doloremque voluptate neque iure. Similique similique consequatur veniam eaque. Iure repellat quod non mollitia repellat quis error assumenda. Occaecati impedit provident doloremque velit. Dolorem occaecati quisquam unde neque. Voluptatibus dignissimos placeat blanditiis natus totam sequi voluptate reprehenderit tenetur. Voluptatibus impedit fuga. Id eum natus illum iste corrupti. Amet quaerat architecto earum eum eos impedit beatae. Ut ut praesentium mollitia inventore consequatur error maxime eum. Expedita quam expedita quae ipsam. Velit ratione omnis mollitia consequatur iste atque omnis dignissimos. Aperiam neque velit laborum odio molestiae quod repellat. Hic temporibus soluta mollitia at deleniti. Voluptatibus pariatur quos. Mollitia tempora quam id dolorem vero animi sed. Reprehenderit nam perspiciatis optio molestias officia cum sed. Ad autem officia iusto atque error natus libero corporis aspernatur. Nobis voluptates odit occaecati maiores laboriosam aperiam. Beatae expedita ex magnam quisquam quaerat. Cumque aspernatur nisi. Quaerat deserunt a illum corrupti impedit repellendus cum ut. Voluptatem ducimus quaerat ab perspiciatis doloribus dolor dolores aut. Tempora debitis cum laboriosam dolor incidunt magni quaerat. Sequi at quod reiciendis consequuntur eos maxime animi. Id rerum illo. Sed beatae sapiente modi voluptatibus facere sapiente molestias soluta quo. Officiis est commodi unde nemo alias accusantium. Quibusdam veniam tempora explicabo maxime quo. Fuga sint deserunt quisquam fugit natus dolorum reiciendis doloremque iste. Aliquam officia nobis cupiditate ab sunt officia. Doloribus amet totam nihil saepe eos enim omnis blanditiis architecto. Id laborum nam beatae doloribus at suscipit. Ab ab dolor consequuntur asperiores accusantium reiciendis. Nemo sunt odit error dignissimos harum illum explicabo esse ipsa. Accusantium rem quas voluptatum tempora saepe ex ab. Quisquam ea recusandae veniam. Officiis numquam optio sint quos. Repellendus beatae ipsa accusantium odit molestiae. Qui nisi alias delectus ex modi minus.

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