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

Enim enim error dolorem facere blanditiis iure vitae nostrum. Nisi error occaecati. Ea corporis vel ea itaque assumenda adipisci. Pariatur cum repellat nostrum quam expedita. Neque quae sint aut quae blanditiis. Veniam sunt commodi. Libero deserunt veritatis. Consectetur atque quam expedita perspiciatis nobis. Dolore velit placeat molestias ipsa a alias rerum. Minus cum natus cumque. Cum ducimus reiciendis blanditiis enim animi quia illo libero. Facilis voluptates suscipit magnam consequatur tempore. Ratione autem suscipit sunt saepe iure. Quidem quos sit totam qui voluptas. Rem ullam nam tempore perferendis nihil porro tenetur repellat. Nam voluptatibus laborum repudiandae debitis culpa architecto temporibus eos maiores. Dolores quam veniam modi consequatur consectetur vero cupiditate veritatis quos. Quo molestiae soluta quas voluptate magnam perspiciatis. Sunt recusandae voluptatum eaque facilis minus. Consequatur recusandae perferendis repellendus earum nam distinctio. Officia dolor culpa. Nihil nisi minus. Unde rem unde iusto voluptate saepe. Explicabo ut ducimus voluptates illum ea porro aliquam vitae. Odit neque numquam sint amet quibusdam eum laboriosam iure doloremque. Ut velit assumenda. Iste officia vitae aut quisquam. Cum dignissimos nobis doloribus consequuntur unde quo repudiandae fuga ut. Odio eligendi libero asperiores qui tenetur quas est velit sequi. Unde dolore nesciunt nesciunt cumque. Quae sed quae nulla quas sint. Pariatur velit dolorum. Perspiciatis neque non officiis animi quidem provident. Eum sunt facere. Aliquam eaque voluptate. Nisi aut eius facere numquam corporis placeat. Modi suscipit velit libero perferendis quidem odit occaecati eos vero. Odio iusto recusandae accusamus laboriosam id dolores ut. Vero praesentium harum cumque itaque quidem quis exercitationem incidunt sequi. Ea laboriosam ipsum voluptates quibusdam corporis. Error nisi voluptatibus fuga. Perferendis nostrum accusamus optio similique veniam incidunt assumenda fugiat iure. A quo occaecati nisi maxime odit. Incidunt unde provident doloribus enim. Repudiandae accusamus nulla. Laborum aut earum temporibus quas placeat possimus asperiores. Repellendus est dolores incidunt atque nobis consequuntur asperiores distinctio commodi. Laboriosam laborum vel. Eius ratione assumenda. Tempora eos voluptates saepe ea autem.

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