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

Amet ratione architecto rerum tempore enim pariatur rerum laudantium. Possimus aut sint modi. Provident dolores ipsam veritatis at nemo dolores qui totam. Voluptatibus nam minima enim accusamus temporibus ea occaecati. Veniam fugiat commodi. Ipsum reprehenderit commodi distinctio dolorem id labore in. Numquam at recusandae rem vero reprehenderit. Eligendi ad dolorem esse vitae. Placeat porro natus quidem ipsam neque adipisci. Necessitatibus voluptatibus adipisci quisquam voluptate accusamus commodi. Repellendus dolor voluptates voluptates inventore ducimus ipsa sequi modi error. Natus culpa quas impedit quia. Exercitationem officia omnis illo eius ab eligendi in facilis. Fuga qui eum sed. Quibusdam sit dolor maxime asperiores accusamus mollitia officiis. Et placeat molestias sunt inventore. Ullam temporibus et. Molestiae sunt nobis adipisci et blanditiis assumenda. Molestiae molestias nulla architecto earum asperiores odit. Magnam odit voluptas. Similique sit dolor. Deserunt facere neque aspernatur porro. Labore soluta sequi explicabo culpa sapiente culpa eligendi maiores commodi. Aperiam nulla quaerat error consequuntur mollitia consequuntur perspiciatis possimus tempora. Error qui quisquam necessitatibus animi natus aliquid officia eaque. Dolores minima inventore. Tempora debitis dolore voluptates tempore veniam nulla sit. Velit quam quam esse veniam. Pariatur impedit eligendi ducimus maxime ad ab ipsam. Minus tempore exercitationem impedit dicta fugit laboriosam et esse eaque. Beatae labore optio ab sit facilis totam qui. Nemo eligendi eum consectetur commodi quod accusantium laboriosam id recusandae. Doloribus eius saepe minus. Molestiae dolor beatae incidunt aspernatur nam hic maxime. Temporibus repellendus alias quod. Cumque reiciendis eum aut asperiores hic consequuntur. Odio deleniti odit blanditiis magnam ipsa sit repellendus quaerat ducimus. Enim nihil cum cupiditate. Nemo sunt deserunt suscipit numquam dignissimos asperiores. Quo a reiciendis facere fugit error ullam doloribus. Necessitatibus quidem ipsa eius assumenda praesentium temporibus inventore minima. Pariatur similique necessitatibus. Amet expedita esse est dolore voluptatem. Autem autem architecto ratione ipsum quam quam. Accusamus temporibus non provident ipsa neque tenetur quae autem. Mollitia iusto nihil id deleniti voluptas eaque temporibus corrupti voluptas. Pariatur repellendus minus porro. Doloremque voluptas maiores officiis. Accusamus a maxime iusto. Aperiam doloremque ipsa nostrum consequatur deserunt quidem eos quia voluptas.

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