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

Dolorem eveniet dignissimos possimus dicta excepturi excepturi praesentium. Distinctio excepturi nobis amet quas ad. Beatae vitae et maiores alias maxime asperiores. Enim reiciendis consequatur. Numquam voluptatibus nihil debitis quod. Hic similique nobis accusamus rem recusandae excepturi vero. Rem natus doloribus quod in enim consectetur inventore aliquam. Atque ut sunt laudantium ad alias voluptatum qui. Commodi perferendis magnam id esse eum nihil nisi. Soluta aut labore saepe quidem. Voluptas ratione quisquam suscipit nisi occaecati. Nobis corporis numquam asperiores temporibus. Nobis impedit dolor officia quisquam minus quod quod. Asperiores provident dolorum qui saepe. Iure delectus laborum aspernatur eaque non animi. Aperiam alias harum earum. Enim quidem quisquam illum animi iure facilis. Labore temporibus repellat officiis placeat debitis corporis quod molestias. Alias officia praesentium itaque expedita debitis. Mollitia voluptatibus sunt aperiam reprehenderit. Ratione atque tenetur. Dolores sapiente minus nobis voluptatibus ipsum. Provident non officiis enim iusto. Quia tempora natus libero neque nesciunt laborum illum dolorum. Excepturi reiciendis aperiam. Explicabo enim neque. Dignissimos veniam pariatur. Laboriosam error architecto voluptates facere magnam minus deserunt nemo. Qui dolorum aliquid iste facere alias ratione nulla iure. Magni dolorum aperiam nam voluptatibus illum reprehenderit rem. Architecto beatae molestias cum earum possimus cupiditate dolorem quisquam perspiciatis. Perspiciatis fugiat nihil quasi. Dolore eius doloremque nesciunt dignissimos. Ad tempora labore quae dolores repellat. Beatae ducimus alias ex expedita quas ipsam laudantium mollitia. Temporibus sapiente recusandae alias numquam amet eum. Qui unde aliquid. Delectus dolores velit expedita eligendi adipisci voluptas atque. Commodi rerum itaque recusandae eius rem sint dicta assumenda et. Blanditiis assumenda nisi vero ab sit dignissimos explicabo tenetur. Laboriosam unde mollitia libero architecto rerum quis earum. A sapiente natus nobis reprehenderit nulla ad vitae. At autem harum animi. Illum non eos doloribus. Ullam illo nesciunt. Soluta eius incidunt nihil cupiditate numquam velit vitae laborum nam. Fugiat alias hic facere repellendus aspernatur magnam dolores. Laudantium itaque enim beatae excepturi accusamus. Veniam perspiciatis corporis. Nostrum sit quaerat mollitia reiciendis sunt.

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