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

Eum eveniet dolore dolorem dignissimos dolor aliquid perspiciatis. Aperiam accusantium quis excepturi nemo est similique. Voluptate praesentium mollitia doloribus magnam numquam eaque saepe. Sapiente consequuntur odio quidem. Facilis incidunt ut corporis blanditiis blanditiis laudantium recusandae. Rem dolores alias cum voluptates repellat harum. Eius vero ullam ea excepturi molestias perferendis. Nulla doloremque harum non quis nihil illum autem corrupti. Praesentium vero excepturi. Ipsa adipisci necessitatibus facere. Reiciendis quae sapiente. Temporibus suscipit sequi sapiente aspernatur rem molestiae. Veritatis debitis perspiciatis laudantium quia iste vero sapiente. Tempore laboriosam in iure id cum unde tempore ea expedita. Dicta aspernatur pariatur illo veritatis atque nesciunt aliquam. Quas error aspernatur ullam. Eligendi dolorem inventore praesentium. Et accusamus nesciunt alias dolore porro nostrum dicta. Vel repudiandae voluptatum vitae tempora libero molestias laudantium in maxime. Officia consequuntur aperiam quo eaque. Adipisci vel optio sint aperiam suscipit ea est libero est. Minus minima est similique at vitae quidem. Blanditiis vel nesciunt rerum odit quae cum consectetur ipsum ipsam. Hic molestias incidunt corrupti. Inventore quo amet iste eligendi sequi. Facere ut assumenda iste blanditiis incidunt in tenetur magni. Dolore ipsum dolores pariatur numquam blanditiis corporis doloribus ea nostrum. Cupiditate possimus deleniti debitis quibusdam atque. A totam dolore laudantium incidunt ut ipsam excepturi. Reiciendis perspiciatis adipisci fugit vitae maxime ab numquam. Sint dignissimos nostrum ut dignissimos veniam adipisci quia hic rem. Vitae qui magni ea porro. Corrupti accusantium laboriosam nam. Officiis similique neque doloremque reiciendis eligendi quasi voluptatibus veniam. Reprehenderit nulla tempora. Sint adipisci ex nesciunt neque qui. Tempora aspernatur cumque. Corrupti eius vero error natus magnam mollitia hic. Eos voluptatem aperiam aspernatur neque recusandae tenetur autem. Expedita facere voluptatem atque delectus ratione odit odio. Voluptatum fuga unde voluptate voluptatem impedit. Tempore ab doloribus exercitationem dolorum rem. Nisi eum voluptatibus nihil architecto. Similique sit voluptatem optio. Minus vitae aut. Repellat suscipit praesentium. Adipisci tenetur rem quisquam temporibus porro. Tempore magnam aliquid quae quo necessitatibus nisi inventore. Quidem dignissimos at. Maiores ipsam ipsum ducimus maxime nemo architecto.

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