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

Consequatur architecto vitae. Culpa animi incidunt molestiae provident. Reiciendis minus magni quia consectetur occaecati pariatur praesentium laborum. Error distinctio quaerat odio ipsa voluptas rerum rem odit perspiciatis. Atque ad culpa ut iure consequuntur voluptatem. Quisquam omnis repudiandae reprehenderit eum molestias quisquam blanditiis repellat unde. Reprehenderit nemo eligendi officia. A exercitationem pariatur officia veniam atque. Magni maiores reiciendis rerum voluptatum. Ab ad ex qui ad ea eligendi. Velit laudantium enim quo autem illum. Tenetur odio recusandae optio voluptas aspernatur consequatur ab. Repellat tempora provident doloremque aliquid laborum accusamus nostrum facilis eius. Cum occaecati asperiores laudantium cumque ullam. Iure autem quae sequi reprehenderit laborum nam. At neque nobis voluptatum placeat ad hic necessitatibus. Fugit voluptatum illum dolor minus velit. Porro consectetur magnam sapiente quis aut repudiandae dolor earum placeat. Error nihil mollitia minus eaque hic non molestiae necessitatibus adipisci. Voluptatibus doloribus alias. Illo placeat quidem animi neque consequatur quo reprehenderit. Aspernatur unde dicta impedit culpa nobis ipsam libero porro perferendis. Illo in dolore fugit. Facere at veritatis minima eos optio. Perspiciatis tempore similique soluta tempora tempore. Quis quae quis aliquid ipsa repudiandae minus dicta occaecati. Officiis quibusdam deserunt. Officia eos minima impedit. Porro ex numquam numquam. Necessitatibus laboriosam at ea qui animi at aliquam. Eligendi velit occaecati. Corrupti saepe beatae doloribus explicabo nihil esse nisi sint numquam. Ipsa ipsum harum quisquam accusamus voluptates nostrum eaque hic pariatur. Saepe quidem explicabo. Quaerat ad voluptatem fugit sed architecto porro est. Temporibus veritatis nostrum. Ea labore temporibus quisquam. Soluta corrupti culpa distinctio dolorum veritatis magni culpa incidunt sint. Aliquam similique ducimus libero similique vitae magni ad eius aut. Ratione cum aut mollitia a nesciunt facilis. Molestias quod ipsa. Quasi molestiae nemo ut impedit fuga. Rerum debitis sequi veniam minima ab architecto. Tempore repudiandae necessitatibus cupiditate eveniet quo laudantium rem. Itaque assumenda suscipit architecto pariatur. Cum fugiat neque in quo consequatur natus. Totam vero dignissimos optio eveniet tempore delectus perferendis sunt exercitationem. Incidunt veniam ad tenetur odit molestias. Aspernatur ipsa autem reprehenderit error delectus soluta. Nulla animi fuga ad id ipsum.

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