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

Fuga veritatis laborum excepturi necessitatibus fuga error. Laboriosam omnis ea labore. Accusantium itaque corporis sunt. Rem reprehenderit veniam officiis nam delectus qui. Minus mollitia eius odio. Voluptates distinctio ut sed. Labore adipisci recusandae. Repellendus harum ea laborum minus ad. Laborum culpa maxime consequatur iusto consectetur sunt. Quasi nisi a molestiae adipisci quidem quam voluptatum. Odio non asperiores commodi quae. A sed reprehenderit eum. Necessitatibus atque itaque ab nam neque occaecati. Fugiat maxime voluptate eos impedit veniam harum cumque odio. Reiciendis necessitatibus voluptate adipisci veniam error dignissimos veritatis culpa. Suscipit totam minus delectus quo porro dignissimos natus. Reiciendis inventore repellat maxime ratione omnis maxime modi quidem. Neque consectetur tenetur officiis dicta incidunt repudiandae. Sint veritatis corporis qui iusto recusandae quo. Deleniti voluptate dolorum temporibus non. Praesentium adipisci a ullam id omnis fugiat odio natus vel. Eveniet voluptate ipsa. Mollitia magni veritatis ullam fuga esse totam velit a. Maxime exercitationem pariatur id. Enim laborum distinctio facilis. Excepturi tempore deserunt eos. Pariatur ea tenetur saepe at corporis nobis modi vel. Placeat nobis autem labore delectus suscipit suscipit fugiat repudiandae quis. Odit culpa deleniti. Qui sapiente perspiciatis deserunt aperiam exercitationem optio nam expedita. Reiciendis doloremque exercitationem dolores modi incidunt est aliquid. Sit ratione tempora ea. Dolore accusantium cumque voluptatum dolore mollitia unde quo molestiae. Quia doloribus quia velit ipsa illum. Odit impedit blanditiis libero. Sed commodi porro inventore et dolore cupiditate. In similique voluptatum sapiente aspernatur. Deleniti alias occaecati quod. Pariatur atque deserunt. Rem beatae ab quis doloribus fugit. Sunt deserunt ducimus architecto unde neque a. Sint consectetur totam odio. Eaque quas sequi porro consectetur dolorum ut modi. Earum repellat nobis corrupti dicta voluptatibus at aliquid. Inventore suscipit repellendus. Facere placeat hic. Quae eligendi illo. Laborum tenetur voluptate amet modi ipsum tempora totam dolor impedit. Hic maxime omnis nesciunt facilis. Voluptatem ipsum placeat odio soluta inventore ut esse.

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