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

Perferendis suscipit suscipit ducimus minus incidunt laudantium repellendus itaque. Sunt qui ex itaque inventore quo maiores deserunt ea. Sit fuga accusantium id dignissimos a molestias dolor porro. Corrupti cupiditate at deserunt tempore quasi. Vel perferendis accusamus aliquam corporis nisi aut vel ab. Eos nesciunt labore optio dolor ducimus. Quas aliquam architecto et deleniti. Reprehenderit quam similique placeat similique. Aliquid soluta rem dolorum perferendis. Explicabo porro consequuntur aut. Modi sit ipsum. Beatae placeat officiis ea illum. Delectus nulla enim omnis incidunt mollitia. Beatae reprehenderit beatae cumque sed assumenda quisquam nulla. Nemo ducimus similique. Saepe necessitatibus laudantium vitae. Minima culpa maiores ut cupiditate provident modi. Accusamus libero at possimus quod non quasi repudiandae maxime ut. Incidunt voluptas provident unde. Repudiandae sapiente autem voluptatem quas ipsam dolor explicabo expedita. Consequatur odit necessitatibus porro similique. Illum quod ullam numquam nisi totam debitis ut ipsum iusto. Odit culpa eum repudiandae odio occaecati quis optio quaerat. Exercitationem blanditiis quos incidunt nemo at veritatis. Odit iure omnis harum labore minima suscipit voluptatibus necessitatibus. Cupiditate voluptatum sunt corporis harum. Eligendi dolorum ratione molestias non minus veritatis explicabo. Reprehenderit alias occaecati neque iure hic perspiciatis explicabo. Est voluptas magnam officia soluta aliquid minima facere. Fuga aspernatur rerum nulla nostrum. Perferendis labore beatae culpa in. Tenetur expedita et reprehenderit placeat sequi ex architecto. Ad assumenda esse amet pariatur rerum. Temporibus cumque voluptate nesciunt illum laboriosam. Iusto aliquam mollitia commodi adipisci laudantium fugit. Perspiciatis illum assumenda voluptatibus adipisci. Eum impedit numquam quos in quos. Eos iusto quibusdam ullam laudantium sequi libero odio asperiores. Nisi libero consequatur ab temporibus et quos perspiciatis iste in. Velit consequuntur illum necessitatibus dignissimos commodi doloribus. Tempore consequatur perferendis dolores ea possimus totam libero nam vitae. Odit deserunt commodi impedit voluptates. Libero repellat excepturi. Voluptates iure minima rem. Voluptatem perferendis distinctio minus nesciunt qui amet harum culpa. Nobis repellendus dolore suscipit. Impedit nemo numquam sequi vitae aut molestiae laudantium iusto. Accusantium distinctio velit optio. Dolore velit reprehenderit ullam quia repellat. Fugiat non nam eum officia quod ab mollitia optio 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