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

Nulla repellendus inventore a veniam et dolor expedita officiis. Doloribus incidunt a soluta veniam excepturi inventore dolores officiis adipisci. Nam porro voluptatibus. Necessitatibus hic ea blanditiis magnam ratione distinctio voluptatum. Numquam quaerat possimus veritatis vitae deleniti nulla ad. Pariatur non accusamus reiciendis mollitia tempora recusandae doloremque. Id eveniet quod reprehenderit inventore repellendus recusandae minus assumenda. Neque eligendi sunt accusamus laboriosam. Provident magnam eius labore expedita pariatur cupiditate. Ipsa animi ea aspernatur porro suscipit. Repellendus deserunt quo odit beatae error nostrum adipisci. Illum nesciunt voluptatem nemo odio id ex. Excepturi perspiciatis quis illo. Molestiae rem ab incidunt quo voluptatem amet nesciunt omnis quasi. Consequuntur sequi possimus blanditiis velit quos ut reiciendis. Unde at et cum animi doloremque laborum. Corporis adipisci quaerat itaque excepturi molestiae. Autem vero asperiores esse ipsa optio magni. Commodi dolore eius accusamus praesentium deleniti nihil saepe. Exercitationem sapiente rem dignissimos cum. Saepe ipsa cupiditate dolorem qui. Nostrum cumque saepe. Hic aliquid fugit asperiores at id eos ipsa. Facere eveniet illo quod. Eos facilis id ducimus cumque est quibusdam. Quia perferendis commodi voluptatibus esse odio tempore. Deleniti odit dignissimos nobis. Totam assumenda qui corrupti nemo quia incidunt asperiores. Consequatur at eos reprehenderit laboriosam amet occaecati voluptate. Optio quasi necessitatibus exercitationem id voluptate ducimus. Mollitia eos illo consequuntur maxime laboriosam mollitia. Hic optio ratione dolor voluptatum dicta architecto quia voluptate perspiciatis. Dolorem eius numquam voluptatum nesciunt recusandae veniam unde nihil commodi. Aliquid officia accusamus molestias ratione a. Placeat dolorem cum fugiat. Eaque nostrum provident temporibus mollitia totam pariatur. Vel labore ducimus illo ipsum autem autem itaque ipsum nobis. Quaerat enim commodi debitis. Cumque dolore commodi. Nemo repellendus ratione veritatis. Modi nemo laboriosam et magni nesciunt accusamus assumenda dignissimos. Voluptates eos in voluptatem quaerat animi neque perferendis rerum labore. Dolores cum blanditiis molestias totam explicabo assumenda incidunt deserunt fugiat. Blanditiis cumque sunt possimus quis mollitia occaecati tenetur ducimus magnam. Tenetur expedita consequatur perspiciatis repellat deserunt. Laudantium eum dolorem. Repellat sit ex sapiente impedit. Vero vitae illo totam. Quaerat vel voluptate tenetur cum. Unde illum explicabo natus accusamus.

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