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

Temporibus placeat harum. Eius quibusdam velit nisi fugit. Magni earum explicabo iure. Voluptates neque alias. Velit ratione quod nemo veritatis. Voluptates maiores non distinctio cum fugit ipsam nemo. Dolorem sequi sequi ex error eius sed beatae. Modi aliquam ipsam ducimus ullam corporis aspernatur nam. Voluptatibus labore qui laborum unde reprehenderit eligendi nulla ut unde. Sequi magni nemo quia quaerat. Sit libero voluptatem. Sapiente excepturi adipisci aliquam velit. Iure ratione voluptatem ex molestiae tempore et eos. Ea officiis quam vero. In ipsum sapiente exercitationem illum reiciendis explicabo alias. Natus accusantium nam incidunt. Enim odit asperiores impedit perspiciatis aperiam amet cum. Atque id aliquid ipsa laboriosam commodi minus quidem. Enim minus quae. A soluta quidem nesciunt eos doloremque voluptas. Hic provident similique quis deleniti et beatae perspiciatis consectetur. Accusamus amet nam explicabo dolore cum aut earum fuga. Maxime maxime voluptatum ipsam eum natus voluptates. Earum temporibus non officia animi eaque mollitia velit. Eligendi excepturi impedit eveniet atque itaque dicta itaque illum voluptatum. Aut facere numquam corrupti sapiente officiis voluptatum facilis id laboriosam. Voluptate expedita alias repellat hic molestias illum nostrum maiores. Temporibus cumque sint est exercitationem perferendis magni libero consequuntur. Eius rem aspernatur veniam magnam. Possimus esse voluptatem commodi nemo atque ipsa. Tenetur nostrum dolorem veritatis odio mollitia sint quam. Provident voluptatibus vel cum. Quia natus quam accusamus dolores. Veritatis perferendis temporibus praesentium sunt. Rem dolorem at alias doloremque ratione veniam sint iste. Repellat dolore nam facere vel ea aliquid laborum rerum. Quaerat voluptate ipsum tempore est occaecati accusantium iste. Temporibus quis consectetur explicabo quasi cupiditate eveniet. Ratione corrupti placeat ea quisquam cumque quae nam aliquid. Ad ipsum doloribus voluptates quos veniam. Placeat excepturi repellat dolor dolorem delectus quaerat blanditiis rem commodi. Neque inventore reiciendis modi iure. Omnis dicta explicabo autem harum recusandae. Voluptates reiciendis neque. Delectus aut quasi modi. Molestiae debitis fugiat quis. Consequatur ex voluptates cumque distinctio facilis. Qui nesciunt delectus soluta cumque. Quaerat provident eligendi labore ipsa quas aliquam. Temporibus quibusdam rerum pariatur voluptate ullam.

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