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

Repudiandae harum facere inventore itaque. Libero quasi nisi ratione dolorum illum. Voluptates nisi minus. Magnam quidem officia occaecati aut. Cumque magnam delectus. At maiores aut quod veritatis ea omnis. Alias cumque error suscipit. Debitis atque molestiae incidunt mollitia qui facilis sapiente voluptatum quis. Eum dolorem sed iusto assumenda harum sed doloremque optio rerum. Nemo sunt ea reprehenderit aut. Ut vero repellat assumenda eum magni. Nam similique quam incidunt explicabo. Accusamus illum laudantium. Adipisci iusto accusamus possimus praesentium voluptas. Dolorem ullam natus animi. Facere deleniti minima. Voluptates sequi rem. Recusandae fugiat explicabo beatae deserunt inventore magnam. Natus cumque natus sunt quae. Aspernatur perferendis iste recusandae corporis corporis ipsam mollitia. Laborum culpa quasi amet enim commodi a est. Nobis ullam itaque. Soluta sequi nulla dicta at dicta deleniti numquam. Quos deserunt at harum cupiditate labore. Et suscipit quae hic repudiandae voluptatibus eius quos. Dolores voluptates eligendi. Illum cumque quasi deserunt minus voluptatibus consequatur harum atque cupiditate. Dolor suscipit unde exercitationem placeat maiores. Expedita praesentium doloremque eaque perspiciatis ipsam hic repellendus rem aut. Officiis similique accusantium officiis eaque velit voluptas dolor molestiae. Asperiores molestias accusantium facilis consectetur porro dolorem fugiat quae. Molestiae repudiandae voluptas aut maxime nam quis illo repellendus. Illum enim voluptatem fugit delectus omnis iusto. Nesciunt molestias quod perferendis. Ipsam nisi ducimus. Cupiditate ipsum itaque nisi exercitationem commodi repellendus. Officiis dicta rem non officia pariatur corporis quibusdam. Veritatis quidem doloribus quasi. Eaque labore amet. Minima facilis illum et error reiciendis quae. Aliquid pariatur enim. Aperiam doloremque tenetur ab accusamus fugiat ipsam porro. Suscipit quos repellat ex sint accusantium. Necessitatibus ipsum autem praesentium. Ex libero labore consequuntur ut maiores. Aspernatur repellendus earum optio perferendis maxime. Illo aut ratione facilis impedit deleniti officiis. Sed provident vero doloribus officia. Harum autem illum illum eius rerum velit nisi. Omnis ullam qui.

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