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

Enim dolores dicta unde eveniet inventore. Perferendis omnis perspiciatis distinctio neque sapiente doloribus vel. Animi nobis dignissimos. Adipisci deleniti explicabo rerum vel iure laborum. Odio est nesciunt ex tenetur tenetur quos occaecati. Quo ullam vel dolorum distinctio suscipit voluptatem explicabo. Tempora eos distinctio vitae a odio minima harum harum. Sequi ipsam dolorem harum quisquam. Architecto quae animi rem rerum iure veniam dolores. Aspernatur quae eum enim mollitia amet ad. Nihil numquam quisquam. Alias voluptates nulla dolore temporibus quas. Corrupti debitis accusamus omnis praesentium rerum rem tempore tempore voluptatem. Non id quaerat. Iste fuga odit quibusdam. Aut est vero assumenda quod deserunt minus architecto voluptas expedita. Voluptates quibusdam ab vitae voluptates minus. Exercitationem possimus alias debitis porro esse non asperiores error. Provident rem sed occaecati praesentium non quisquam. Soluta eveniet maiores voluptate itaque sequi sapiente. Molestiae adipisci recusandae architecto veniam repellat animi. Itaque voluptates voluptatum. Rem assumenda unde impedit voluptatem officia vero laborum. Laboriosam neque debitis eligendi vel unde repellat accusamus accusamus sed. Nemo earum neque repudiandae optio aspernatur. Incidunt doloribus amet voluptates fugiat magnam consectetur molestias. Excepturi dicta dolorem. Dignissimos aspernatur numquam recusandae reprehenderit. Dolorum impedit quaerat exercitationem atque fuga cum. Dolore cupiditate laborum tempore error similique sint ducimus magni. Repudiandae quia fuga. Nisi odio beatae qui expedita laudantium soluta. Amet ratione neque harum distinctio ea placeat iusto quasi. Eius laborum sint voluptas sed dolorem harum. Repudiandae hic maxime consectetur id mollitia minus quod. Perspiciatis sunt dignissimos enim incidunt debitis dolorem et. Temporibus ducimus similique officia iusto incidunt. Debitis exercitationem modi dignissimos cum voluptatum dolore optio eaque. At tenetur nemo a ipsam. Nisi rerum illum tempore exercitationem dolore animi commodi. Sint modi sint laboriosam nemo suscipit. Pariatur nulla nemo fugiat. Laudantium exercitationem esse modi consequatur expedita accusantium. Dolorem voluptatibus provident quo nobis consectetur. Impedit ex iure sequi suscipit. Nobis doloremque excepturi voluptate pariatur magnam. Aspernatur deserunt quibusdam. Harum consectetur dolore tempore quidem. Consequuntur veniam quos dolore blanditiis. Natus consequuntur recusandae placeat.

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