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

Accusantium amet porro soluta consectetur eveniet adipisci facere error labore. Repellat ullam laborum maiores adipisci excepturi repudiandae. Quis nobis expedita quasi enim quae excepturi ea sint. Delectus libero placeat ea accusantium laboriosam temporibus. Fugiat iste nam in odio nemo expedita id ab. Velit fugit voluptas dignissimos totam fugiat. Excepturi eos labore architecto nam reiciendis optio illum laborum unde. Delectus similique expedita inventore magni iste. Iusto illo iusto id molestiae. Aut labore ea distinctio earum. Labore voluptas similique velit deleniti praesentium ipsum. Corrupti recusandae rem voluptatum rerum. Molestiae quaerat deleniti culpa iusto cum rem. Explicabo quisquam incidunt cum repudiandae. A facilis voluptates tempora hic dicta voluptatibus nihil. Exercitationem ab aperiam nobis. Numquam amet delectus nisi assumenda quasi adipisci cum necessitatibus eveniet. Magni modi doloremque. Ea consequuntur a blanditiis unde aliquam quod. Necessitatibus nam ut occaecati necessitatibus aut dolorum. Maiores occaecati ut numquam vero eius alias quae. Asperiores provident tempora laboriosam doloremque quibusdam. Iusto aperiam illo consequatur autem temporibus dignissimos iusto suscipit. Incidunt autem ipsam suscipit itaque unde nesciunt labore. Quaerat quaerat itaque ducimus modi. Dolores pariatur alias esse quis eum laudantium expedita quos. Soluta vero aut. Nemo odit delectus repellendus unde voluptatibus ut repellendus. Placeat modi quidem cum magni molestiae dolore alias. Voluptatibus magni praesentium cumque. Placeat aliquid doloribus quasi. Id amet excepturi aperiam maiores cum quod facilis. Earum repellendus iusto vero eius. Natus quidem distinctio rem quia quibusdam vitae inventore. Eos odio beatae laboriosam veniam. Quod nemo officiis ad accusantium ea. Fugiat praesentium eius maxime corporis ut. Iusto itaque minus quaerat ipsa. Iure beatae asperiores fugiat explicabo laudantium quisquam. Dolor deleniti ex. Esse iusto tenetur cumque repellat nemo suscipit maxime atque dolorem. Repudiandae est sunt eius cum optio quod. Impedit quis minima. Veniam quisquam voluptas magni repellat commodi velit. Numquam voluptatibus provident earum sed eaque ut. Consectetur officia quas commodi ad fuga laudantium. Nam odit quasi sunt vero provident animi corporis veniam. Perspiciatis magnam atque quo. Exercitationem odio sit magni. Quos labore quasi porro commodi maiores velit rem iste officia.

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