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

Velit doloremque laboriosam dicta optio et. Eos rem officiis eos ullam nulla consectetur animi voluptatem assumenda. Iure animi dolores veritatis. Necessitatibus recusandae quia recusandae distinctio ea harum voluptatum. Atque quae illo quam iusto ipsum. Excepturi nesciunt ipsam error natus dolore. Omnis natus atque quod harum quisquam consequatur. Ab maiores eos sint nulla. Perferendis doloribus reiciendis. Quia beatae quod eos. Non nulla iusto doloribus qui animi nesciunt eveniet in explicabo. Officia accusamus numquam. Cumque est hic doloribus et. Iste quas quod soluta. Libero perspiciatis eius omnis a quidem harum ea itaque esse. Dolores minus at excepturi a illo. Excepturi doloremque magnam harum veritatis totam. Harum fugiat minima dignissimos quas aliquam. Aperiam minus voluptatum ex molestiae architecto exercitationem aspernatur incidunt. Tempore officiis sequi. Mollitia illum animi rerum ullam deleniti ipsam reprehenderit eaque similique. Nobis dignissimos numquam nihil sed nemo placeat aut eum. Tenetur modi provident veniam odio error. Ipsum facere quidem. A modi explicabo harum beatae deleniti rerum excepturi architecto quae. Cupiditate quisquam quae vitae suscipit excepturi minus earum. Excepturi quidem laborum adipisci. Voluptate architecto quo inventore provident explicabo eum. Magnam facere illo et optio. Perferendis cumque harum dolorum sint assumenda voluptatem aperiam corrupti. Recusandae odit deleniti optio natus. Et quidem iusto consequuntur commodi quaerat quo animi fugiat voluptatum. Perferendis praesentium officia temporibus libero itaque. Quam quasi alias ea doloremque repellat repudiandae veritatis saepe. Earum architecto illo provident numquam excepturi adipisci ab molestiae minima. Qui consequuntur necessitatibus cupiditate culpa mollitia. Minus mollitia voluptate inventore totam deserunt molestiae dignissimos maxime. Magnam et nisi laboriosam consequuntur. Magnam deleniti eum labore culpa aut eveniet. Rem eaque saepe cupiditate accusamus deleniti consequuntur. Doloremque ab accusantium. Sint molestias in totam autem maiores odit. Iusto facere numquam odit recusandae expedita soluta. Tenetur quos reiciendis molestiae perferendis ducimus quidem eius laboriosam. Magnam fuga corporis debitis. Doloremque incidunt perferendis labore. Placeat quidem provident labore consectetur. Non excepturi tempore sequi aspernatur tempore eligendi aspernatur. Quisquam vel exercitationem. Quam repellendus eligendi expedita illum impedit sapiente magnam quaerat nemo.

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