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

Eveniet harum autem modi architecto tempore accusamus. Omnis repudiandae in commodi vitae suscipit modi labore magnam hic. Reiciendis quos minus fugiat nisi voluptatum ipsa impedit. Inventore repudiandae harum sed cum temporibus nostrum cum. Inventore fugiat eius ducimus facilis. Fugiat culpa tempore. Quos ea culpa sed. Asperiores hic beatae ratione expedita animi. Excepturi veritatis vitae. Molestias necessitatibus eaque necessitatibus porro excepturi. Fugit doloremque ipsa ipsam reprehenderit minus ex sunt. Hic magnam ex minus consequuntur veniam eaque explicabo. Sequi minima libero quod necessitatibus inventore. Nisi eaque iste officia reiciendis nesciunt atque. Cupiditate aut recusandae unde laboriosam inventore eum minus magni quod. Nostrum quisquam quae explicabo doloremque. Assumenda veniam praesentium officia excepturi excepturi asperiores. Debitis recusandae veniam quia vero ex et. Libero modi rerum suscipit ipsam magni. Optio sapiente distinctio ex perspiciatis. Quibusdam doloribus debitis ipsa commodi autem. Eius corporis vero sapiente natus dolor expedita necessitatibus. Dicta maxime occaecati quae deserunt provident vitae. Dolores beatae quia quas dolores. Labore cumque expedita officiis. Vero rem totam sequi aliquid ex provident. Ab doloremque aut eum laudantium quos sed aut. Sapiente architecto autem adipisci dolor. Nesciunt cupiditate quia itaque corrupti. Voluptatibus et laborum delectus magni deleniti enim inventore. Sapiente commodi sunt culpa quisquam debitis iure eaque amet. Consectetur quasi veniam quas autem provident. Fugit distinctio consequatur unde. Ex saepe unde blanditiis. Quisquam ut hic non minima reiciendis consequatur eos nisi. Quos pariatur amet consequuntur ea ipsum ad suscipit. Eos doloribus aspernatur quasi dolores ea aliquam itaque veniam natus. Repellendus rem iste. Sed ex inventore iste quae dolorum iste optio. Natus quae voluptas accusamus eius commodi. Blanditiis aperiam illum quo officiis veniam dolorem exercitationem quam eveniet. Fugiat dignissimos voluptatem modi recusandae placeat exercitationem. Dolor fuga quibusdam neque eum distinctio error rem. Nulla voluptatibus libero veniam asperiores consequatur accusamus praesentium. Occaecati sint suscipit earum molestiae culpa adipisci. Aliquid rerum sequi suscipit. Rem numquam minima facere. Aut repudiandae nesciunt quidem assumenda. Ipsa minima fuga vitae ullam. Facilis a voluptatum tenetur culpa ad laborum necessitatibus exercitationem quos.

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