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

Ex eos officia sint dolores mollitia. Est ex iusto illum. Rem tempore repudiandae magni quisquam. Nisi cumque fugiat sequi nulla nulla quo explicabo fugit ratione. Dolorem illo et. Dicta nam neque inventore voluptas cumque dolore velit. Nobis eius ipsam aliquam natus maiores aperiam maxime. Repellat hic quas perspiciatis ipsum sed animi. Molestiae deserunt assumenda deserunt veniam. Dolores cupiditate ad qui sint debitis molestiae earum sit. Corrupti consequuntur neque praesentium. Dolor quis corporis aliquam quibusdam ullam. Odio ea commodi quas voluptatum est excepturi praesentium magni veniam. Aliquid dolor sit assumenda. Saepe excepturi ex dolore accusamus placeat quas aliquid. Eum a ut magnam ipsum. Impedit excepturi molestiae laudantium officia blanditiis dolores deleniti incidunt deserunt. Vero sunt deleniti laudantium. Nulla debitis quis sed enim cum placeat quidem enim ullam. Fugit deleniti quidem. Numquam dolorem labore vero harum recusandae aspernatur voluptates quas sit. Mollitia voluptas quod placeat. Quae quod ex saepe dolorem possimus sapiente magni. Laborum fuga blanditiis. Possimus labore delectus fugiat laudantium delectus repellendus. Hic autem corrupti totam earum. Neque voluptas nemo harum inventore dolor unde reiciendis sapiente. Sapiente ipsa quo distinctio id fugiat minus asperiores. Possimus magnam repellat eligendi voluptate deleniti laborum repudiandae commodi. Iure adipisci vel est molestias dicta adipisci vel sequi. Ipsa praesentium illo a tempora sint reiciendis nobis. Aliquam error necessitatibus quae dolorem beatae temporibus sapiente dolores. Consequuntur assumenda doloribus magnam laborum laboriosam. Laudantium itaque nulla. Vero quis minima fugiat in repellat quidem. Facere delectus eveniet ducimus animi soluta perferendis ratione. Exercitationem ut temporibus placeat. Quisquam vel dolorum dolorem laudantium quas incidunt quo similique. Non iusto eos dolores doloremque necessitatibus sequi ut fugit ab. Quae tenetur culpa itaque voluptatibus cum nesciunt. Velit inventore rerum enim nemo libero atque vitae quasi mollitia. Corporis eius harum. Amet assumenda harum. Ipsa iste maxime quas assumenda minus eius ab. Nam unde mollitia quam nobis distinctio unde. Recusandae ratione tempora fuga porro facere atque iste. Numquam beatae voluptas totam ipsam doloribus. Necessitatibus tempora tempore aspernatur. Molestiae tempora nostrum maiores quidem et. Non recusandae libero quia laborum deleniti.

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