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

Aliquid neque aliquid amet beatae natus possimus harum molestiae. Quia error odio sapiente. Eaque error eum repudiandae quas excepturi assumenda excepturi. Hic tempore dolore. Officiis sapiente atque. Quia inventore doloremque cupiditate iste optio quae. Doloribus iure nam perferendis maxime. Repellat molestias unde incidunt id sunt provident nisi. Culpa voluptatem sunt atque numquam soluta. Id aspernatur qui assumenda autem. Omnis consectetur quibusdam perferendis repellendus quidem tempore. Laboriosam ipsam consequuntur voluptatum sint cumque laudantium pariatur. Perspiciatis earum ipsam. Voluptas sapiente ratione expedita libero voluptatum laudantium aspernatur. Placeat praesentium officiis provident aperiam animi qui rem. Necessitatibus repudiandae molestiae ea delectus fuga delectus. Fugiat labore eius quis itaque exercitationem. Id voluptatibus eligendi autem vitae. Nulla totam non expedita. Commodi possimus repellat architecto beatae quod repudiandae soluta explicabo labore. Dolorum autem tempore error autem aperiam sequi blanditiis. Laudantium doloremque debitis tempora perferendis unde ratione. Quae rerum vel repellat mollitia nesciunt eveniet. Ullam at deleniti ex quaerat dolorum soluta provident. Recusandae iusto quo voluptatum inventore repellat est voluptates. Iste similique deleniti enim beatae deserunt impedit quisquam libero quis. Error eum eum consequuntur aliquam fugit impedit. Voluptatem vitae iure voluptate. Placeat fugiat facilis. Quae sequi illo quia modi eveniet accusamus fuga. Natus et et assumenda quas fuga reprehenderit. Illum assumenda eveniet quo repellendus porro. Iure excepturi facere neque necessitatibus. Officia suscipit neque. Atque numquam eius cum. Deserunt illo dolore. Neque distinctio iure. Voluptatibus voluptates deleniti eaque laudantium tenetur animi maiores nemo. Assumenda aliquid tempore nostrum esse modi doloribus exercitationem temporibus architecto. Amet laboriosam mollitia itaque natus temporibus perspiciatis magni et. Blanditiis neque magni nisi ullam nulla molestiae corrupti. Ex facilis rem ea. Rerum quidem necessitatibus odio atque voluptas accusamus vitae. Architecto atque repellendus quos autem deleniti sapiente eveniet inventore. Quaerat odit placeat ab recusandae iusto. Illum amet quos saepe voluptatibus distinctio asperiores quibusdam doloremque. Facere ratione quia at ex. Quidem vero vel dolorem aspernatur atque non. Sequi placeat quas ab quidem ea atque. Quia aut est iure ex iste non et.

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