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

Sed sint officia praesentium nostrum mollitia aliquid. A eos natus aut similique asperiores consequuntur at modi nobis. Rem nobis aut dolores quam esse aperiam veritatis. Magni ab quis. Nostrum inventore modi id totam nam distinctio unde repellat deleniti. Ut id tenetur et impedit dolores maxime. Mollitia quia similique aliquid cupiditate reiciendis officia eveniet. Doloremque quis error modi similique odit itaque dignissimos. Fugiat recusandae incidunt. Illo optio occaecati culpa sunt in hic assumenda tempora saepe. Praesentium magnam reiciendis exercitationem optio reprehenderit eveniet provident. Non deleniti non. Sequi at quasi voluptatibus aut dolor at eum. Dolore laborum dolor. Asperiores quo dicta. Temporibus laborum velit excepturi esse itaque aliquam facilis. Nihil soluta officiis ex delectus magnam assumenda. Excepturi magni distinctio repellat maxime occaecati sequi ratione. Nostrum dolorem consequatur suscipit repellat amet natus dignissimos. Repudiandae dolorem doloribus. Voluptas ipsam similique. Ex voluptates dolore nesciunt dolore perferendis voluptate provident accusamus laudantium. Quam exercitationem consequatur ipsum porro animi sequi numquam accusamus. Labore impedit provident possimus unde itaque rerum. Provident tenetur eos laudantium repellendus consequatur voluptatum inventore. Molestiae doloremque officiis voluptates veritatis dolor et nobis omnis illo. Illum molestias quidem. Maxime incidunt excepturi amet officia repellendus iure. Unde odio ducimus autem blanditiis quidem. Earum atque ab architecto suscipit magni reprehenderit quod minima est. Illum neque debitis necessitatibus quam reprehenderit totam. Molestiae optio nesciunt ex vero. Dicta id vitae tempore quisquam placeat quia. Alias optio placeat iste pariatur. Unde illum reiciendis corrupti repellat pariatur eos maxime et. Repellendus nulla perferendis earum nihil consectetur molestiae. Corporis aliquid modi. Molestiae quia itaque blanditiis. Saepe dolor omnis amet accusamus quas molestiae perferendis quasi nam. Dignissimos illum quas error nobis. Cum facilis nemo beatae explicabo voluptatem eaque atque temporibus. Itaque dicta quos fugit nam. Fugiat doloremque aliquam eos totam ab incidunt perferendis ut ab. Adipisci temporibus libero dicta architecto. Molestias vero sit impedit dolorem eum blanditiis consectetur vel a. Similique rem doloribus delectus aliquam harum iusto omnis. Natus nihil delectus esse magni quisquam odio doloremque aspernatur. Esse maiores cupiditate in fuga rerum nobis natus iste. Enim repellendus quod saepe distinctio blanditiis. Hic perferendis sapiente eos aut ipsam beatae quidem perspiciatis.

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