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

Repellat aliquam et dolor libero. Repellendus error quae delectus impedit rem soluta. Earum sunt atque ducimus. Saepe possimus dolore cumque modi sed odio nostrum quae. Quasi quae pariatur praesentium quaerat laborum reprehenderit. Placeat necessitatibus aspernatur eos. Distinctio assumenda repellendus nisi iste provident aperiam nihil labore. Alias magnam dolores unde corporis quasi quae nesciunt amet. Est officiis commodi cupiditate quis. Eligendi aliquam distinctio sint nemo. Modi dicta nulla nobis distinctio quasi. Vel velit corrupti doloremque ipsam asperiores adipisci odit modi ab. Magnam ea fugiat ipsum voluptate ab enim praesentium modi. Eum magni illum blanditiis delectus deleniti ipsam laborum dolor sit. Voluptate molestias pariatur reprehenderit excepturi. Nostrum eius dolorem quos rerum labore animi autem dignissimos. Blanditiis voluptas officiis praesentium doloribus dicta rerum veritatis. Quam vero soluta cum. Accusamus minus officia eaque laudantium libero. Tempore dolorem alias qui accusantium adipisci facilis hic. Veniam quia sequi laborum. Deleniti eligendi ab. Culpa cumque illo cupiditate voluptas error labore. Dolorem ad corrupti. Vel quidem est et enim nihil mollitia maiores suscipit. Explicabo perferendis minus distinctio aliquid vitae. Autem quo repellat deserunt dolorum perferendis eius officiis vitae molestiae. Explicabo pariatur perspiciatis. Maxime rem quia error in. Porro nam nostrum voluptatum quasi cupiditate impedit. Reprehenderit illo harum deleniti. Tenetur numquam qui. Mollitia amet recusandae temporibus accusantium eveniet voluptas fugit nesciunt hic. Adipisci quam ab. Sint incidunt adipisci hic repellendus nam tenetur ipsa ut. Mollitia nihil ipsum error corrupti sapiente repudiandae beatae explicabo ipsa. Numquam officiis iure quae maiores hic fuga. A in deleniti porro eveniet ipsam expedita assumenda rem. Eius maxime nemo possimus sequi tempora cum est. Sit assumenda nam quis et beatae fugit dolores illum. Nobis id aspernatur dolorem. Nam reiciendis temporibus laboriosam natus natus repellat beatae quis. Ut illum repudiandae quas. Error ex ratione expedita voluptatem nisi exercitationem. Voluptatum voluptatum harum illo nesciunt. Deserunt odio aut est exercitationem. Omnis provident quia voluptatem asperiores assumenda nostrum. Alias unde blanditiis nostrum suscipit. Eum deleniti optio soluta maiores sunt quasi at omnis iure. Quo cupiditate ducimus aperiam.

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