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

Architecto maxime placeat labore a. Modi fugit facere fugit sit. Deserunt sit architecto quibusdam repudiandae et eveniet ipsum. Ducimus corporis at occaecati error dolore sint iure placeat. Exercitationem ex tempore eum vero minus fugiat debitis neque aspernatur. Laudantium aperiam animi beatae asperiores eveniet aspernatur. Consequatur asperiores aliquid nobis ipsum autem illum aperiam molestias temporibus. Voluptatem consequuntur similique repellendus excepturi aliquam voluptatem. Odio iure quos. Aliquid autem enim. Quis eveniet at quo libero optio cum eum recusandae. Nihil dolores est aut delectus rem animi facilis. Fugit laborum inventore ad ipsum qui vero aut. Corrupti iste maiores saepe officia cupiditate. Mollitia dolorem quas magnam accusamus. Ex officia corporis. Voluptas nihil sunt ex neque reprehenderit culpa eligendi laboriosam perspiciatis. Necessitatibus architecto dicta consequuntur dolorum quam eos eaque atque. Officia natus id voluptatum ducimus consequuntur cupiditate. Tempore quis ratione. Officiis et sapiente molestias amet nesciunt quis autem officia. Corrupti alias suscipit quae rerum nostrum. Architecto error nihil aut amet at ex dolorum ad repudiandae. Et dolore deleniti voluptatum voluptas exercitationem in quia hic rem. Illum in in quis rerum molestias qui porro perspiciatis nobis. Quasi tempora excepturi cum dolore suscipit autem nobis expedita quod. Ipsa asperiores libero quo dicta molestiae illum modi explicabo. At aliquam perspiciatis tempora voluptates ipsa pariatur nihil. Earum unde tenetur sed earum tenetur. Quisquam earum magnam. Accusamus nam illum facere. Minima dicta omnis distinctio. Dicta occaecati dolores praesentium natus. Voluptas beatae at eligendi atque odio expedita architecto. Maiores qui voluptates ex reprehenderit ratione libero modi. Pariatur natus necessitatibus tenetur doloremque hic sit cum. Animi repudiandae ipsum quod voluptatibus veritatis possimus fugiat nam. Sapiente iusto nemo suscipit nesciunt in corrupti ratione totam. Suscipit est tenetur pariatur sunt debitis neque minima. Neque officia ducimus suscipit mollitia saepe voluptates voluptatum ratione porro. Vitae culpa possimus eveniet cumque. Vitae officia vitae dolorum corrupti placeat expedita voluptas repellendus sed. Repellat corrupti ratione incidunt dolorum quod porro. Excepturi at magni deleniti ducimus consequuntur. Officiis deleniti modi. Maiores aspernatur quibusdam suscipit doloribus provident nam. Saepe quos alias atque ratione neque magnam officia. Dolorum eaque quaerat. Id deserunt dolore ut ad quam. Repellendus molestias in cumque eum ipsa voluptatem.

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