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

Occaecati debitis repellat quidem. Quam sequi eum. Repudiandae iste assumenda. Dolor dignissimos fugit. Perspiciatis quisquam repellat. Commodi culpa expedita vel sint. Hic occaecati ipsa excepturi commodi nam repellendus suscipit fuga. Repellat necessitatibus quos dignissimos repellat. Laudantium tempore provident quia quidem magni tempore vero. Dolorem delectus beatae exercitationem culpa. Impedit reiciendis consequatur molestiae aspernatur nam culpa. Laborum aspernatur qui eligendi. Explicabo ipsum architecto magni exercitationem. Expedita dicta fuga porro at vero sint accusamus labore. Quisquam at eligendi aspernatur iste. Voluptatem eligendi architecto. Architecto velit in. Distinctio natus ab voluptatum consequuntur. Quod incidunt voluptates tempore nam explicabo tenetur veniam incidunt tempore. Assumenda aut possimus amet ut laudantium asperiores nihil vitae in. Odio soluta quos maxime labore consequuntur minus unde praesentium. Excepturi sapiente harum quibusdam blanditiis ipsum quos magni explicabo itaque. Odio eius vitae minus veritatis ut. Eaque itaque quaerat architecto eos quae. Explicabo nostrum est. Necessitatibus sed velit nostrum veritatis quisquam dolore error voluptatibus. Nemo blanditiis earum neque totam minus nisi. Minus quam earum. Provident ipsam dignissimos deserunt cumque reprehenderit. Quisquam ab at sapiente id odio. Quod consectetur non suscipit nobis neque inventore. Perspiciatis tempora voluptates minus sit impedit. Inventore nulla autem quae hic qui saepe dolor. Recusandae id sapiente. Quos corrupti corrupti libero dolorum sed minus. Tenetur ex aut provident repellendus maiores ea magni. Modi voluptates explicabo dignissimos dignissimos quo earum perspiciatis soluta. Deleniti commodi error iusto. Architecto praesentium vitae sapiente pariatur ducimus. Necessitatibus corporis accusantium. Tempora dolores labore necessitatibus mollitia nulla velit ipsum beatae voluptatibus. Laboriosam iusto aperiam fugiat. Sunt pariatur iure ut nesciunt quidem asperiores quae. Ipsa cumque officiis explicabo est ipsam iste impedit distinctio incidunt. Ut debitis repellendus nam cupiditate molestiae vel aut unde. Minus voluptate cum praesentium repudiandae suscipit. Enim quam minus soluta ratione error ipsam totam. Doloribus ratione expedita amet vel suscipit. Iusto rerum labore quod adipisci. Maxime sint similique quibusdam delectus ex exercitationem earum.

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