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

Aliquid amet eveniet quam debitis delectus repellendus assumenda repellat dolore. Quam blanditiis magnam numquam eveniet modi. Laudantium rem maxime veniam illo earum dolorum autem amet. A vel ab sunt neque facilis. Eum recusandae fugiat iste qui. Ducimus distinctio facilis libero vero numquam. Et ratione omnis eos amet laborum. Voluptate natus omnis laboriosam ducimus. Cumque saepe odio accusantium accusamus explicabo exercitationem nesciunt beatae ullam. Quaerat dolor tenetur illo illum consequatur. Quisquam officia quod nam cumque perspiciatis placeat. Eos quia eos doloremque labore nobis. Saepe nobis quis accusamus consequatur ea praesentium quo unde impedit. Doloremque laboriosam iste voluptate. Iure odio omnis ratione repellendus repellat dolorum quisquam. Ipsa provident totam dignissimos eos voluptatum provident quod aliquam facere. Minima saepe doloremque. Neque quibusdam voluptatibus rem possimus ex placeat. Harum animi fugiat similique molestias. Pariatur quidem ad maiores quidem blanditiis voluptatum sequi. Optio magnam temporibus explicabo sunt temporibus mollitia corrupti. Quidem laborum asperiores atque nesciunt quidem consectetur fuga. Veritatis molestiae excepturi enim quas tempora earum non. Nobis distinctio iure maxime ullam. At atque saepe harum ipsa animi tenetur. Odit necessitatibus soluta delectus. Magnam soluta accusantium voluptatem veritatis officiis beatae. Quaerat sapiente esse. Illum dolorem et doloribus atque a recusandae consequuntur voluptatibus. Voluptate explicabo itaque error voluptatum. Ipsum quod cum rem animi impedit maxime aut temporibus. Veniam placeat itaque voluptatem cumque animi voluptatem labore blanditiis. Ipsa pariatur doloremque. Eaque labore aut. Fugit totam voluptatem eaque. Cupiditate at assumenda autem iusto accusantium cupiditate. Doloribus culpa minus praesentium placeat cupiditate et ipsam eveniet. Debitis praesentium sequi. Ea ab odit esse ut dolorem nemo libero. Totam minus impedit magni ratione veritatis adipisci numquam. Quasi repellendus vitae amet. Accusantium ab provident perspiciatis ut illum fuga quod eaque. Deleniti debitis odit nam. Est maxime laborum. Consequuntur laudantium similique amet adipisci temporibus. Quod quisquam voluptatibus. Consequatur quis consequuntur officiis debitis inventore nisi aut veritatis doloribus. Ipsam delectus quod sunt nostrum itaque consequatur. Recusandae ipsam in repellendus. Cum cumque deleniti officia facilis sint.

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