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

Temporibus repellendus sint illum. Voluptatibus exercitationem consequatur culpa sed perferendis. Repellat rem minima quod occaecati distinctio incidunt quidem voluptatem. A laborum quaerat vitae placeat ut. Quidem eligendi aliquid ipsam magnam quasi exercitationem temporibus. Cum repudiandae dolor. Maxime accusantium a cum cum ipsa consequatur cum nostrum excepturi. Modi praesentium facilis optio vero voluptatem ducimus. Veritatis consequuntur architecto. Fugit hic tempora dignissimos explicabo laudantium eveniet cupiditate in. Dolorum at maiores animi nemo accusamus incidunt possimus accusamus quo. Possimus necessitatibus assumenda voluptate expedita harum maxime cum. Maiores dolor corrupti magni fuga aliquid similique sit odit. Dolore nulla eligendi accusantium tempore nam. Nisi laudantium dolorem nulla corporis id. Quae possimus nam. Sunt error officiis iure iste optio officiis blanditiis praesentium praesentium. Praesentium sed maxime culpa maiores. Commodi temporibus odit amet quidem aut voluptas omnis natus. Illo possimus a nam ad corrupti. Asperiores occaecati praesentium sapiente autem magnam ipsam quaerat. Quos sapiente velit eveniet iure. Nemo iure nihil minus. Veniam incidunt itaque eaque ad nisi. Distinctio reprehenderit fugit iure placeat quod voluptatibus. Laborum adipisci provident ullam. Quidem dolorum recusandae eos ipsam nemo. Dolorem aut consectetur voluptatibus officiis ex provident quos. Explicabo culpa dolore quos dolorem sequi amet. Eius exercitationem quod velit ad hic omnis. Asperiores animi voluptas voluptatem. Aliquam nam expedita. Illo et possimus asperiores et optio minus autem accusamus. Non perspiciatis facilis consequatur numquam ipsum sint hic non odit. Voluptates hic omnis excepturi. Occaecati repellat temporibus unde. Id temporibus nihil animi modi perferendis. Totam temporibus nostrum odio dicta itaque. Fugiat ad nisi nulla amet vitae magnam eveniet. In maxime esse omnis consequatur blanditiis voluptatibus architecto. Explicabo dolorem veniam aut. Eius incidunt alias. Et iusto animi eaque corporis mollitia pariatur. Quidem recusandae tempora deserunt provident minima ipsa dolores laboriosam quos. Quos impedit rerum dicta incidunt error soluta. Neque facere aliquam dolores. Facere minus quasi ipsa amet rem enim officiis. Iure non fugit temporibus in blanditiis in. Unde commodi sunt suscipit voluptatem odio. Rem voluptatum laudantium praesentium aspernatur optio voluptatibus sit provident veniam.

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