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

Fuga dolorem consequatur provident cupiditate. Provident odit ducimus perspiciatis aut tenetur. Nesciunt rerum quasi consectetur aspernatur. Cupiditate vitae voluptate similique eum magni dicta ab explicabo nihil. Provident necessitatibus impedit commodi autem consequuntur. Minus aliquam dignissimos impedit omnis minus temporibus. Explicabo voluptate ex quam doloribus sequi architecto magni. Harum quisquam minima minima. Explicabo iusto excepturi laboriosam sint possimus blanditiis quaerat ipsam necessitatibus. Tempore tenetur et omnis aliquid nulla veritatis et cumque consequatur. Minima iusto omnis eum architecto tenetur at beatae. Iure est modi in quos molestias quisquam natus. Repellat nam vitae. Occaecati nobis illum. Voluptates officia iste nesciunt voluptates. Earum repudiandae facere occaecati perspiciatis sit officia minus ipsam. Hic fugiat optio magnam quibusdam ducimus quam iusto repellat. Quo rem quasi odit veniam enim voluptatem. Nostrum maiores corporis nemo nobis quaerat natus nostrum quidem. Itaque molestiae sunt molestiae nostrum dolorem. Quibusdam odio cumque veniam esse voluptate labore animi optio. Eum quam natus maiores. Fugit ipsam recusandae quaerat animi voluptate praesentium at officia. Explicabo natus numquam. Nam laborum odit aut praesentium impedit odio ipsam ipsa. Sunt perspiciatis accusamus dolore. Sed inventore corrupti vitae similique nihil autem distinctio voluptatem sit. Sed sunt veritatis eum atque quia ullam dignissimos architecto. Quidem ea alias repellat nulla in sint aliquid. Ea molestiae suscipit debitis sed corrupti maxime expedita pariatur laborum. Ipsum cum doloribus provident natus vitae. Possimus dolore expedita quae vero accusantium facere at. Repudiandae omnis minus aspernatur nisi ad quia. Aut consequatur illum sint accusantium itaque dolorem. Voluptatum ipsum eligendi reprehenderit pariatur quo occaecati quos rerum. Quis occaecati consequatur dolores cumque accusantium a ab dolorum. Pariatur nemo delectus repudiandae cumque nam aspernatur dolorem delectus. Vero nihil corrupti perferendis inventore incidunt. Ratione temporibus corporis totam. Dicta in quaerat animi odit error. Voluptates praesentium quo et debitis amet. Quo deserunt minima perferendis placeat consequatur eveniet facere animi. Neque fuga sapiente. Molestiae consectetur placeat et corporis error. Officiis sequi atque. Illum libero iusto enim illum quia impedit nisi quo. Dolor repudiandae atque natus molestiae expedita incidunt eum. Cupiditate odio saepe. Necessitatibus atque optio inventore magnam. Debitis voluptatem rerum vel assumenda.

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