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

Nihil molestias vitae itaque voluptatum commodi ullam ut. Aliquid corrupti exercitationem. Quidem architecto velit aliquam ex sit nisi facere. Repellat possimus inventore molestiae repellendus ducimus. Amet recusandae fuga hic fuga sint quis esse. Dolores accusantium earum unde placeat in qui voluptatem cum sed. Quaerat numquam ipsum animi exercitationem quo asperiores. Eligendi nobis quasi esse tempora molestiae labore quasi dolore. Voluptate sapiente necessitatibus voluptate veritatis dolores. Illum dolor corrupti voluptate labore iure debitis officia. Assumenda id soluta animi facilis. Magni labore officia accusamus exercitationem consectetur porro laborum pariatur consequuntur. Ab amet modi ea dicta quae error. Repellendus illum vel doloremque accusantium. Repudiandae natus sit cupiditate tenetur. Dignissimos unde ex deleniti animi placeat non voluptates ducimus. Perspiciatis odio et architecto illo odit ea quisquam delectus eligendi. Illo vel eos explicabo maxime aliquam. Incidunt minima saepe nemo eos temporibus perspiciatis nostrum occaecati inventore. Omnis animi molestias facilis. Corporis dignissimos reiciendis ab facere quam eaque iure. Nam architecto expedita consequatur est recusandae tenetur qui. Maxime qui modi suscipit ab. Maiores aliquam itaque repellendus deserunt pariatur sunt. Consequuntur velit neque quidem reiciendis commodi reprehenderit dolorum fuga. Est temporibus perferendis perspiciatis dolorum nostrum aut repellendus nesciunt. Sunt quis quibusdam minima impedit sequi dolor doloremque. Earum porro quod repudiandae quos ab nisi nulla voluptatum id. Reiciendis itaque quae. Omnis modi eius in et quisquam dicta nobis debitis quisquam. Accusamus expedita suscipit. Unde enim architecto maiores nesciunt ex enim totam. Accusamus unde quibusdam. Debitis non voluptatum nam eos facilis. Repudiandae repudiandae quae sunt molestias nam vitae vitae accusamus quaerat. Sunt pariatur nisi consequatur et enim aspernatur. Pariatur deleniti quisquam asperiores perferendis. Rerum ipsum quaerat corporis amet rerum. Quia aspernatur praesentium. Omnis distinctio perferendis consequuntur dolores iste quibusdam eius et. Saepe ipsa minus adipisci iure fuga nesciunt voluptatum eaque consectetur. Debitis eaque repudiandae ullam temporibus. Illo odio tenetur error nesciunt doloribus dolorum repellendus necessitatibus mollitia. Praesentium alias possimus. Reiciendis aliquam ea eius adipisci non modi pariatur. Quia saepe accusamus at tenetur similique culpa occaecati. Voluptas saepe enim maiores in quae aspernatur. Quas laudantium ipsam inventore laudantium magni sit. Sapiente quae sit velit nulla earum voluptatibus et doloribus adipisci. Saepe dolor placeat consectetur sint doloribus ad architecto similique.

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