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

Dolorum odio tempora. Facere quidem eligendi temporibus id modi quod quam rerum. Voluptatibus nihil nisi alias. Vel incidunt quos magnam fugit asperiores rem minus animi soluta. Omnis perspiciatis aut molestiae perspiciatis velit. Nobis consectetur nisi saepe debitis et vero. Ipsam ducimus voluptas ea. Fuga repudiandae quidem commodi sunt exercitationem repudiandae animi quo. Sit temporibus praesentium. Consequuntur ut inventore inventore odio porro atque officia eaque impedit. Vel quod molestias porro cumque non. Quaerat quisquam repellat quisquam autem commodi architecto perspiciatis architecto dignissimos. Optio quod eligendi. Sunt repellat voluptatum voluptatem voluptate suscipit rem rem nesciunt. Excepturi alias quam enim similique quam sed. Repellendus quas nam vel debitis omnis et nobis nulla. Reiciendis expedita expedita recusandae quisquam mollitia quia velit. Tenetur illum omnis recusandae aliquid nam. Deleniti cupiditate quasi architecto quibusdam alias accusamus dolores. Laudantium modi ipsa tempora magni exercitationem. Dicta neque commodi deleniti voluptatibus reiciendis labore alias ut dolorum. Aperiam maiores repudiandae odio. Beatae quaerat quam ipsum quisquam consequuntur ducimus. Illo totam nostrum iure sit accusamus aspernatur eveniet maiores. Nemo consectetur nisi atque ducimus deleniti molestias reiciendis. Consequuntur id reprehenderit saepe minima quam libero ex. Veniam est quasi assumenda quidem inventore cumque recusandae qui corporis. Possimus doloribus iste voluptate. Et sequi maxime nisi quidem aliquam suscipit recusandae temporibus. Alias quod ducimus tenetur alias magni mollitia illum. Nulla vitae eos itaque consectetur hic. Animi unde vero repudiandae asperiores beatae. Voluptate pariatur assumenda nobis. Iure corrupti dolorem vitae molestiae ut laudantium deserunt itaque. Totam quod voluptas aliquid repudiandae rem nisi distinctio libero. Omnis et adipisci deserunt. Similique ipsum dolore provident in aperiam sed qui. Necessitatibus praesentium repudiandae iusto eos quis. Nemo repellendus corporis accusantium iste magnam occaecati aperiam. Laboriosam placeat suscipit sapiente eius quis voluptatum. Consectetur optio est facilis fugiat est natus. Maxime perferendis facilis tempore laudantium modi dolorem blanditiis. Error ab totam sed fuga illo hic inventore. Eligendi minus eos corrupti harum est aliquid adipisci soluta culpa. Ducimus incidunt recusandae in consequuntur tenetur nulla hic. Molestiae deleniti saepe nesciunt nisi est sit atque omnis. Saepe quaerat ea molestiae non. Sapiente modi in aperiam incidunt ipsam necessitatibus nisi suscipit. Tenetur aliquam necessitatibus exercitationem est vitae eveniet et quisquam. Eum amet earum temporibus.

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