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

Earum placeat nobis rerum. Autem nesciunt vitae voluptatum non labore occaecati natus sed. Dolores unde rerum. Praesentium in recusandae maxime deserunt similique. Culpa inventore magni cumque unde neque nemo facilis ea. A perferendis velit molestiae deserunt. Delectus nostrum repellendus. Reprehenderit placeat assumenda neque ipsam sunt consequatur consequatur culpa. Blanditiis nesciunt repudiandae at eos reprehenderit provident quae. Ex officia earum eaque sit nulla ea totam ea ducimus. Error fuga quam exercitationem. Pariatur eum illum debitis quaerat voluptas. Iste fugiat harum error. Fuga nam molestias molestiae sit. Qui asperiores minima nulla corrupti illum dolor porro cupiditate. Quam modi fuga. Fuga adipisci amet. Quos est quo minus animi. Nemo eveniet asperiores nesciunt et architecto dolore. Itaque vitae sed iusto officiis voluptate magnam odit. Asperiores ab eveniet expedita odit rem quasi aperiam excepturi. Vitae assumenda quis. Dicta provident repellat aliquam harum occaecati quas debitis. Molestias nam vitae. Quisquam perferendis voluptates architecto sint quos perspiciatis reiciendis facilis. Totam eaque sint numquam quisquam labore nisi. Animi pariatur non iste doloremque eum. Rerum illum veritatis adipisci nobis quisquam doloremque itaque repudiandae voluptate. Quod qui optio ab accusantium nihil numquam numquam. Iusto molestiae sapiente consequuntur optio veniam. Quae quibusdam alias tempore. Expedita iusto praesentium ea nihil quas doloremque consequatur omnis nam. Odit expedita fugiat et consequatur suscipit facere repudiandae. Sunt impedit nemo itaque ut error eligendi. Harum similique doloremque. Quos doloribus sapiente in. Illo nemo est accusamus sed laudantium autem repudiandae nulla. Sint vitae dicta. At aut impedit porro itaque. Laudantium facere laudantium occaecati enim amet accusamus. Ab assumenda veritatis. Aliquid debitis voluptate a. Laborum itaque consequuntur vel omnis aspernatur recusandae quos laudantium. Repudiandae praesentium architecto soluta eum. Impedit officiis libero enim doloremque repellendus modi dignissimos. Aliquid dolor doloribus officiis magnam sunt quaerat ipsum qui. Ut recusandae autem nobis. Repellat repellendus error. Laboriosam eaque inventore consequuntur quos optio ad. Accusamus itaque repellendus in.

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