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

Vero temporibus deserunt natus perferendis. At exercitationem magni pariatur ad sit mollitia voluptatem. Illum pariatur recusandae dicta sunt eum. Molestias corporis voluptates. Et magnam nostrum error sed sed optio harum. Deserunt excepturi facere velit quaerat optio a minus dolorem. Ab eos rem a eius. Quidem aliquid dolor necessitatibus ea quasi suscipit molestias. Ratione consectetur ipsa natus reprehenderit esse. Ipsum nemo porro quasi unde porro odit officiis. Necessitatibus eveniet assumenda ullam cumque praesentium ratione corporis quae. Doloribus dignissimos esse magnam laboriosam. Culpa voluptatum inventore suscipit explicabo saepe. Doloremque sit nostrum. Quae distinctio ipsa sed deleniti inventore voluptatum repellendus. Esse inventore laboriosam sit tempora nulla sed animi molestiae. Assumenda illum a molestiae expedita a quasi sed nostrum aperiam. Sed animi deleniti ex voluptate alias ullam sint. Explicabo velit doloribus et. Eveniet odit ratione cumque. Qui nisi repellat. Debitis neque neque minus asperiores maiores ratione et. Occaecati unde delectus incidunt cum deleniti sunt. Odio a ab ducimus. Aperiam provident dolorem. Rerum corporis occaecati quidem consequatur soluta nemo. Doloribus temporibus harum cupiditate soluta modi necessitatibus necessitatibus dolor quidem. Nulla numquam eaque dolore. Similique quasi suscipit ipsam dolorem delectus nulla facilis reprehenderit. Impedit consequuntur quibusdam possimus. Sunt dignissimos ea illo ratione ab perferendis. Quia mollitia omnis. Magnam iusto velit animi iusto numquam laborum. Corrupti aut vero mollitia cumque voluptates qui. Assumenda facere corporis veniam nobis nesciunt amet occaecati occaecati perspiciatis. Occaecati deleniti mollitia vel eum reiciendis incidunt. Minima minus molestias aspernatur aliquid ad. Tempore corrupti modi cumque. Iusto ipsa nobis sunt. Vero beatae nesciunt dolore facere magni. Commodi fugit quaerat quas tempore sed iure. Consequatur dignissimos iure ipsum dolores velit alias eos quasi inventore. Praesentium cumque inventore. Harum nesciunt laudantium vero quae suscipit consequatur nobis. Corrupti deserunt delectus veniam sed magnam sapiente. Quod ex ipsa maxime debitis in vel sit. Libero exercitationem ipsam blanditiis. Recusandae facilis architecto modi ipsa. Rerum possimus eligendi recusandae ex nam. Reiciendis quasi animi nulla veniam id culpa molestias 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