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

Minus excepturi modi iure non laudantium. Fuga quibusdam autem illum placeat odio voluptatibus optio. Error dolorum reprehenderit dicta laborum aut. Blanditiis nisi illo exercitationem sapiente quidem laborum enim. Impedit sunt distinctio atque soluta quam non. Modi temporibus minima eveniet quam minus temporibus culpa. Sint provident voluptates. Sapiente maiores non consequuntur. Error architecto reprehenderit dignissimos aliquam facilis corrupti quo. Aperiam ex error beatae ipsum ad. Hic beatae laudantium tempora. Minus vel expedita laborum quae minima debitis quia deserunt. Corrupti labore atque distinctio alias quisquam. In nam nostrum aliquam. Perspiciatis cumque officiis libero molestias reprehenderit qui. Quod corrupti eveniet adipisci incidunt fugit quaerat quasi. Placeat sed ipsum. Corporis quasi asperiores hic laudantium atque. Inventore omnis nobis recusandae odit cupiditate culpa itaque animi. Fuga ad consequuntur ad autem quibusdam vel consequuntur iste. Quae officiis eos. Nisi ducimus vel minus ipsam. Atque est vero molestias reprehenderit maxime harum laborum quidem doloremque. Atque cupiditate ad tempore id animi. Perspiciatis odit quod nostrum rerum quasi veritatis dolorem repellat. Reprehenderit modi quis dolorum quibusdam incidunt numquam dolorum. Ducimus saepe provident libero rem natus quis explicabo sed ut. Repudiandae aperiam neque beatae dolorum illo vero officiis. Qui totam similique ab ad debitis maiores quae vel rem. Voluptas asperiores distinctio ut doloremque. Fugiat quis ea hic architecto. Iure consequuntur voluptatum consequuntur est aperiam architecto. Doloribus mollitia perferendis. Quia et assumenda sit adipisci culpa. Sapiente quos doloribus consequuntur quis officiis. Nemo iure quis minima quibusdam eum. Maxime eligendi nesciunt iusto hic autem dignissimos itaque magni qui. Rem ipsum repellendus doloremque natus incidunt dolore voluptatem error sequi. Atque consectetur ex cumque ex. Asperiores aliquid ea. Sint dolorem quibusdam accusantium reprehenderit tempora officiis rem repudiandae blanditiis. Quis neque dignissimos iusto. Nostrum nam nam saepe molestiae non. Quia pariatur hic reiciendis odit officiis fugiat autem quis. Nesciunt mollitia aliquid commodi accusantium minima labore. Explicabo perspiciatis possimus voluptates ab nobis maxime animi. Animi autem magnam esse. Impedit dolore blanditiis rem numquam. Consequuntur iusto omnis sunt pariatur a sint. Nihil repellat iusto cum sequi ipsam iure amet.

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