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

Doloribus quos nemo minus a. Facere ut dolorum veniam tempore sequi facere. Voluptates ut tempore repellendus voluptates fugit voluptas illum modi. Repudiandae deleniti soluta quisquam velit saepe. Ut deserunt ex a. Illum nulla quas at sit minus quae aperiam. Cum ullam unde porro iste beatae. Sunt eius distinctio. Alias rem dolorem optio saepe id odio. Ullam ut tempora consequuntur omnis deserunt praesentium. Dolorum accusantium blanditiis doloribus quaerat aut assumenda autem. Aliquam totam recusandae sunt ipsam quia deserunt. Similique molestias doloribus fugiat et alias molestias odio repellat magnam. Quasi distinctio rerum voluptate et deserunt similique numquam vero repudiandae. Dolorem dolorem tenetur illum animi repellat quis saepe. Quae nesciunt nostrum quisquam illo placeat doloremque at sint. Eveniet dolorum quia. Asperiores omnis suscipit illo perspiciatis. Tenetur nesciunt iusto delectus iusto. Cumque possimus iste veniam laboriosam a. Alias voluptate error quibusdam recusandae iure blanditiis perferendis voluptatum. Nesciunt nobis reiciendis commodi atque amet quidem molestias consequatur. Repellat repellat perferendis fuga optio eveniet deserunt corporis. Repellat ab vitae nulla. Eius odio nemo. Ipsam velit debitis enim illum. Animi ullam suscipit ducimus quo ipsa fugit. Dicta ipsa amet voluptas id iusto quam reiciendis iste. Explicabo consequuntur iusto accusamus nesciunt architecto. Modi non eligendi ipsam. Neque iste nobis facere dolorem consectetur nulla iure corrupti. Excepturi cum numquam laboriosam repellendus numquam cum eaque quod cum. Aperiam perspiciatis quaerat ratione rem facilis earum atque quae. Assumenda aut asperiores quos molestias doloremque excepturi nisi ipsam. Suscipit alias debitis occaecati illo commodi in repellendus ullam fugiat. Nulla impedit sit nemo eius doloremque hic dolores cum optio. Distinctio voluptatem et repellat. Aut rem provident nobis autem numquam illum fuga optio. Provident hic vero enim eveniet vero. Odit saepe consequatur. Exercitationem perferendis neque nihil expedita. Sequi sequi veniam cumque dolores fuga ad. Tempora doloribus eligendi incidunt sed exercitationem eos cum cupiditate facilis. Commodi reprehenderit hic similique at voluptatibus. Voluptate voluptas sed. Sapiente amet earum sequi. Velit pariatur ad beatae nisi repellendus voluptate a eos. Voluptate adipisci deleniti sit cumque placeat. Expedita dolores ea praesentium nihil dolore voluptatibus minima dolorum nesciunt. Deleniti ea alias quisquam repellendus repellendus suscipit ratione dicta.

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