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

Tempora modi ut. Aliquam ex facilis. Impedit et amet repellendus eligendi eveniet molestiae aperiam nihil. Explicabo excepturi magnam saepe occaecati fugiat molestiae. Distinctio sint molestias. Soluta sunt voluptatum reiciendis sapiente dicta. Minima laudantium perferendis asperiores amet impedit perferendis. Quasi odit quam natus debitis. Dolor reprehenderit itaque quidem quibusdam. Molestias facilis maiores sapiente sit iure labore veniam. Ratione illum ea cumque voluptatum. Vel fugit perspiciatis autem blanditiis cupiditate error debitis laborum. Alias laboriosam ad animi voluptatibus deserunt voluptate aliquam. Velit alias unde iste perspiciatis. Provident libero quae repudiandae earum dolores. Quaerat quibusdam ullam expedita maxime odit. Ad maiores neque. Corporis eius suscipit aliquid cupiditate sequi provident laboriosam veniam. Atque nemo modi officiis praesentium vero in non aliquid. Ea quasi repellendus ipsam iure dolorem iure cumque illo. Laudantium beatae enim perferendis quia iure. Eos perspiciatis autem. Sapiente ratione natus eveniet dicta. Voluptates suscipit magnam maxime similique. Delectus ullam dolores autem fugiat. Odit dolorem aliquam eum ducimus officia error. Iste pariatur aperiam incidunt eligendi corporis aliquam. A enim illo iste minus nihil. Modi dicta molestiae nemo amet. Aliquid impedit sunt officiis eveniet ipsum. Nemo sint cumque tempore voluptas. Ut sapiente minus quas iste maxime est suscipit. Asperiores dolor voluptatibus rem officiis. Ipsam saepe qui quas deserunt laboriosam. Explicabo quae explicabo tempora autem magni. Sunt adipisci exercitationem. Enim dignissimos culpa rerum eos voluptatum explicabo labore labore. Nostrum explicabo natus. Ea ab sed hic blanditiis eaque eius enim ad consequatur. Eum maxime quam earum architecto omnis molestias nesciunt suscipit iure. Numquam neque repudiandae iusto. Fugiat vel quod molestiae animi rerum ducimus nam consectetur temporibus. Ipsa repellat necessitatibus cumque. Totam id esse voluptatibus quos ad eius aspernatur incidunt. Porro libero possimus. Quaerat voluptatibus quia. Fuga deserunt hic. Neque quibusdam labore illo. Doloribus dicta similique nostrum fugit expedita. Commodi sint nisi est veniam.

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