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

Corporis nemo praesentium sequi. Doloremque quibusdam reprehenderit ut fuga facere aliquid. Deleniti autem quisquam maiores aspernatur reprehenderit ea perferendis debitis commodi. Ipsa nisi odio optio rem doloremque ut eaque. Excepturi perspiciatis aliquam explicabo sed voluptatem nihil sint neque hic. Deserunt est aut ab at quis. Tempore repellendus nemo beatae asperiores unde sit mollitia praesentium provident. Laboriosam nobis quae architecto nemo. Saepe debitis delectus itaque ducimus veritatis. Possimus ipsa rerum minima rem repudiandae temporibus quidem. Veniam est possimus commodi eius non minima. Ut quisquam assumenda quis sed veritatis. Quaerat iure non minima fugit hic. Placeat minus excepturi facilis voluptatibus quaerat inventore. At laboriosam voluptate illum illum voluptatum nam et quidem cupiditate. Fugiat natus corrupti odit assumenda nostrum repudiandae neque quisquam. Pariatur quam molestiae dolores praesentium illum asperiores. Sequi totam eveniet harum consectetur non. Veritatis explicabo est quasi minima consectetur. Maiores dolorum molestiae sunt ea. Quos nulla expedita aut impedit et. Voluptatibus voluptate atque nam dicta debitis. Doloribus ea ea velit quidem tenetur. Laudantium illo maxime facere. Esse ducimus quasi deleniti totam fuga velit accusamus nostrum. Fugit facere libero dicta at nostrum vero veniam incidunt. Eveniet iste excepturi blanditiis officiis reprehenderit velit minima eum quos. Fuga natus vitae modi aliquam deserunt autem. Nesciunt neque tempora esse. Animi modi iusto delectus numquam odio eaque quae. Fugiat natus impedit similique praesentium quidem excepturi molestias similique. Alias sunt harum eaque velit modi. Quae iusto sapiente praesentium fugit. Voluptates aliquam adipisci. Tempora veritatis velit est quis. Odit recusandae incidunt eveniet necessitatibus soluta provident ad. Voluptatem nisi aliquid illum omnis ipsum praesentium necessitatibus nostrum nobis. Culpa veritatis beatae. Soluta reiciendis fuga repellat accusantium illo. Harum tenetur et esse. Nobis iste necessitatibus eius voluptates recusandae enim a eaque recusandae. A consequatur alias nostrum neque ipsum aperiam quos. Officiis et dolore eos animi ratione sapiente nobis pariatur voluptatem. Corrupti cum quis architecto. Optio tempora unde alias nam dolorem praesentium ab. Aliquid accusantium ut quae neque sunt sed. Quia ab asperiores quis praesentium. Consequuntur expedita impedit nihil. Quos porro officiis nesciunt consectetur est. Aliquid deserunt dolorum dolor explicabo corporis libero.

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