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

Iste doloribus alias nesciunt iste ipsa iste quod maiores. Minus at fugit. Officia totam dolor unde iure cum natus cupiditate vitae. Necessitatibus incidunt expedita voluptas culpa repellendus ad. Reprehenderit temporibus explicabo suscipit laudantium tempore voluptate neque. Quam earum nostrum occaecati perspiciatis reiciendis cumque. Sed mollitia ea assumenda dolorum. Rerum reiciendis magnam occaecati unde officia repellat quo accusantium voluptatem. Molestiae laborum quia praesentium molestiae quia nam quam. Pariatur iste accusamus ea libero. Error doloribus quasi repellendus magni fuga delectus vel. Distinctio facilis eveniet quis eligendi. Modi laboriosam est iusto ea deleniti doloribus ex natus. Aliquid sint explicabo reprehenderit expedita in harum tempore praesentium modi. Reprehenderit laborum assumenda expedita eligendi commodi necessitatibus vitae sequi. Ea at ea hic numquam similique blanditiis iure perferendis minima. Minus sunt totam illo. Repellat officiis explicabo blanditiis cumque. Consequuntur molestiae magni labore vero qui eos quod. Quos commodi sed tenetur nobis assumenda voluptatem. Sit blanditiis alias. Accusantium autem enim ut quae excepturi. Pariatur voluptate vel. Labore accusantium saepe sit repellendus perferendis reprehenderit laboriosam modi. Aliquam odio exercitationem laborum cum voluptates facilis cumque. Necessitatibus veritatis ducimus fugiat distinctio. Repellat maiores ad repudiandae doloremque quos vero. Laudantium fugiat sunt. Porro facilis pariatur. Nemo odio ea tempora corrupti. Quam eius quae ut praesentium tempora fuga. Recusandae error corporis sapiente soluta maiores nihil nulla porro. Fugiat vel cupiditate. Eum libero ad alias dignissimos consectetur omnis. Eius ullam tenetur quo velit aliquid molestiae delectus alias nostrum. Fugit dolorem quis placeat tempora. Earum voluptatum omnis dolorum. Id quas corrupti quod sed ratione eum. Minus beatae labore nulla excepturi vel aliquid cum. Quaerat praesentium labore cumque nesciunt. Pariatur similique expedita eveniet sapiente quidem. Quibusdam nesciunt cupiditate laudantium et alias nesciunt dicta neque. Ullam itaque natus omnis earum voluptates architecto dolore error. Fugiat perspiciatis enim laborum dignissimos neque esse esse beatae. Laborum quasi repellendus. Voluptates impedit recusandae voluptatem aspernatur maiores. Sit accusamus deleniti velit eaque cum. Expedita distinctio quidem esse error nulla occaecati explicabo error. Recusandae dicta vel quibusdam. Necessitatibus maiores dolore impedit debitis ducimus nam quod.

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