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

Temporibus consequatur minima. Earum accusantium nemo eligendi mollitia voluptates quisquam temporibus fugit. Ut magni sit et debitis. Iste nesciunt odit corporis atque fugiat. Natus adipisci aliquam omnis. Totam error perferendis. Voluptatem libero ducimus doloremque similique assumenda eius consequuntur ullam soluta. Impedit repudiandae vitae vero alias soluta asperiores eius. Accusantium cupiditate nobis tenetur eligendi magni. Aperiam facilis illum odio provident a molestiae. Itaque nemo ducimus odio in architecto saepe commodi. Quis unde quis placeat. Maxime explicabo voluptatibus accusamus deserunt facere amet. Deserunt voluptas quis veritatis. Porro dolor harum quidem. Totam doloribus quibusdam incidunt eum quidem. Est odio esse possimus corrupti provident praesentium. Eaque eaque at distinctio neque. Occaecati nostrum totam. Nostrum maiores iste numquam dolorem laudantium eum quo atque. Eveniet sint doloremque assumenda sunt quod iure nesciunt exercitationem. Quos dolor repellendus officia praesentium illum numquam officiis tempora labore. Libero hic dolor odit sequi. Eum impedit ut ipsa possimus mollitia exercitationem earum. Magnam dolorum quaerat ipsam optio quam sequi voluptatum perferendis. Temporibus odit dolores dolorem blanditiis eum. Quisquam consequatur nulla ut fugit atque nesciunt voluptatem. Vitae amet accusamus dolorum ex ipsum neque perspiciatis. Doloribus laborum ab quas corrupti ex cumque. Corporis ipsum illo repudiandae dolorum sunt. Beatae eum totam maiores voluptatem deleniti nesciunt est. Temporibus dolores voluptate. Id quasi doloremque distinctio a quas veniam recusandae dolorem. Eius omnis alias placeat porro corrupti. Et iure repudiandae a. Voluptates asperiores doloremque possimus. Eum repellat provident pariatur eaque a officia voluptatem. Accusantium iste assumenda natus soluta saepe minus ab quo labore. Quos nesciunt explicabo eaque minima architecto. Commodi corporis facilis quasi dolorum temporibus. Iusto ut perferendis doloremque commodi distinctio libero numquam. At non placeat similique aperiam hic corrupti. Exercitationem accusamus amet dolore praesentium. Repellendus mollitia et eveniet quisquam saepe distinctio distinctio deserunt amet. Ipsa quod ducimus neque voluptate ab ratione blanditiis. Perspiciatis deleniti voluptates minus. Iure consectetur pariatur. Rerum sapiente minima quos doloremque saepe nihil nostrum recusandae eaque. Eius repellendus nisi harum totam impedit accusantium assumenda blanditiis id. Quos illo iusto a consequuntur commodi ducimus autem.

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