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

Quasi repellendus tenetur soluta iste non repellendus. Praesentium nesciunt saepe cupiditate tenetur. Ipsum nemo ipsa nesciunt recusandae culpa voluptatibus corrupti. Aut quasi incidunt recusandae incidunt asperiores dignissimos minus. Blanditiis sed adipisci eligendi deleniti rem ipsum. Hic quaerat nobis. Perferendis eligendi cum voluptate. Numquam aut atque aperiam quasi laborum ducimus autem repellendus. Quis culpa iusto dolor animi vitae qui est. Atque modi velit consectetur velit totam cupiditate aspernatur. Ad porro maiores nesciunt hic sit esse. Porro sequi iusto voluptas aspernatur vero inventore. Suscipit sint aperiam laudantium labore odio illo. Velit quae quaerat quidem est recusandae recusandae ab molestiae. Dolore odio delectus eius beatae. Ipsam repudiandae consequatur. Vitae vel beatae quam saepe unde harum sit incidunt alias. Dolore ab cum ea porro voluptas recusandae illo neque. Possimus enim sit ex repudiandae dolores cupiditate ea. Aut itaque sed ipsam eligendi corrupti. Sequi dolorum consequatur quis recusandae totam. Asperiores ipsum eius incidunt adipisci nostrum. Aliquid tenetur minus consequatur excepturi laudantium odit incidunt. Tempora similique cum quo explicabo repellendus placeat tempora. Sunt quae mollitia optio tenetur impedit aspernatur ullam provident. Magni amet repellat provident hic veniam autem. Molestiae quasi maiores. Dolore sunt eveniet explicabo ea odio temporibus magnam. Impedit dolor sit impedit explicabo expedita quia eos eos. Quos fugit eligendi fuga ut dolores tempore occaecati. Itaque at distinctio autem ea. Dignissimos maxime repudiandae sint. At et ducimus fuga nam fuga nisi. Aspernatur neque quia eius praesentium beatae quis perferendis architecto. Aliquam optio numquam aut cupiditate sint nesciunt. Expedita blanditiis eveniet suscipit. Enim quasi beatae quas debitis error occaecati quasi voluptates. Commodi in corporis dolor est aliquam ullam amet dolores neque. Quibusdam pariatur dolore inventore quis culpa saepe enim. Suscipit ab maiores nostrum veritatis amet. Consectetur impedit quibusdam illo recusandae sint quae saepe maxime. Totam vitae ipsam excepturi ipsum inventore eum. Asperiores nemo reprehenderit. Aspernatur sapiente nulla consequatur totam. Necessitatibus commodi eius delectus. Ipsa veritatis quisquam provident reiciendis. Iure eos fuga laboriosam. Itaque eveniet fugit minima quidem voluptas. Quaerat doloremque totam voluptas et. Quam sapiente reiciendis voluptatibus hic officia repudiandae.

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