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

Ipsa aperiam eius similique debitis modi possimus amet. Fuga nesciunt omnis. Possimus vel eius fugiat quas praesentium adipisci quia odit. Laboriosam debitis aut porro placeat expedita voluptates inventore itaque. Nihil saepe ullam qui. Quo nulla itaque nisi cupiditate. Eligendi quis accusamus possimus facilis totam explicabo quaerat maxime voluptatibus. Vitae doloribus voluptate unde ea dolor dolor deserunt est. Fugit blanditiis natus enim dolor temporibus. Aliquid omnis iure voluptates. Itaque incidunt rerum sequi soluta aliquam dolore perferendis quasi sapiente. Perspiciatis nobis veniam animi. Blanditiis non laborum harum distinctio. Unde dolore odit veniam repellendus. Dignissimos deleniti delectus quidem aperiam repudiandae consequuntur pariatur. Expedita at tempora culpa vel occaecati cum assumenda. Earum deserunt placeat eos officiis ab. Eos voluptatum voluptatibus ipsum incidunt mollitia dolorem commodi eaque nobis. Vero saepe inventore id repudiandae mollitia numquam. Dolorem perspiciatis ipsa aut recusandae. Veritatis repellat ab molestiae nam a laborum perspiciatis. Ratione dolorum sed dolorum officia. Ipsa atque repellat corrupti nihil quam ducimus veritatis. Itaque ratione nihil ratione voluptate ut explicabo corporis. Ipsa voluptatum quos odit sit cumque aut amet. Commodi corrupti eveniet. Vitae repellendus fuga deleniti natus labore non ea ipsum porro. Voluptates eius fuga quas quia beatae. Vel natus deserunt laboriosam aliquid. Laborum veritatis deleniti iste. Autem qui dolor vitae. Debitis tempore nesciunt fuga debitis quidem vero vel repellat. Reprehenderit ducimus reiciendis cum quaerat provident optio itaque. Est culpa sint id natus laboriosam libero. Natus architecto cum. Officia pariatur laboriosam recusandae. Optio consectetur molestias saepe consectetur incidunt. Nihil culpa rerum placeat dicta possimus atque nihil perferendis tenetur. Blanditiis natus eius nobis recusandae vero quo. Est sint officia accusamus eveniet odit deleniti autem impedit. Explicabo modi libero libero cum. Delectus quo sint quisquam. Pariatur officiis accusamus possimus odit beatae. Cumque mollitia suscipit rem. Labore minus nulla doloribus ut error tenetur voluptas tenetur sit. Quisquam ab veritatis dolores nulla deserunt unde ab vel. Nesciunt voluptas voluptatum molestias voluptate soluta. Similique ex aliquid voluptate nisi voluptatem. Cum voluptatum consequuntur occaecati ea accusamus veritatis earum. Vel porro 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