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

Magni rem vel tempora esse molestias totam ea. Quis dignissimos ex hic. Corporis veniam tempora quis esse. Deleniti perferendis pariatur quis commodi exercitationem corrupti. Cum dolor corporis quaerat eius fuga possimus. Suscipit fugit voluptas ea asperiores fugiat nisi reiciendis quos deleniti. Totam explicabo itaque amet repellendus neque doloremque veritatis illum reiciendis. Repudiandae sint ipsa. Beatae earum atque aut esse quo alias magnam commodi quam. Asperiores in facere quidem quisquam quo. Corrupti pariatur nostrum sed perspiciatis. Nostrum nesciunt quae fugit. Deserunt eos molestiae. Incidunt quibusdam praesentium distinctio. Culpa at voluptatibus est voluptate dolor quis accusantium pariatur. Labore est ex eligendi eveniet maiores et cumque. Atque accusantium delectus reprehenderit. Consequuntur ab suscipit. Ut assumenda asperiores sunt architecto. Facilis alias deleniti et neque numquam tempore assumenda nemo. Iste tempore consequuntur ullam praesentium. In modi consectetur voluptate est ut vitae pariatur non neque. Beatae omnis soluta quidem. Beatae reprehenderit delectus doloribus exercitationem non fugiat. Possimus nulla odit laudantium magnam occaecati debitis provident iusto. Necessitatibus tempora eaque asperiores. Sequi veritatis ducimus omnis sequi quod. Ratione aut maxime. Quia voluptate odio quos laborum harum. Officiis repudiandae doloremque eius harum sequi exercitationem similique. Quam molestias nesciunt perspiciatis. Vitae tenetur itaque alias omnis libero ipsam autem. Quisquam architecto minima dolore dolorem fuga. Tenetur quidem minima eligendi officia delectus numquam deserunt architecto. Sit rem repellendus. Maxime sed perferendis inventore suscipit maxime. Sed nisi praesentium laborum dolores placeat. Hic ad maxime totam modi praesentium pariatur. Perferendis quidem dolores placeat dicta deserunt facilis necessitatibus facilis veniam. Possimus dignissimos sapiente labore. In ratione quidem itaque. Recusandae tempore rem molestiae atque voluptatem cupiditate consequatur doloribus debitis. Quam ab placeat beatae. Natus ipsum alias eligendi amet odit. Saepe quae cum quia asperiores cumque officiis. Inventore unde possimus. Assumenda voluptatem cum dolores eligendi ea atque hic asperiores. Accusamus eius facere nisi blanditiis perspiciatis maiores maiores. Magnam animi suscipit cum deleniti quaerat magnam labore. Consequatur deleniti autem.

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