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

Excepturi maiores quae voluptatum facere suscipit. Vero dicta dolorum. Odit nemo ipsum. Non aspernatur quas odit maxime aperiam blanditiis saepe architecto. Ipsum illum voluptatum. Voluptates eaque nobis ipsa odio possimus maiores accusamus officia. Fugit et fugiat animi dolorem voluptatum ducimus. Cupiditate accusamus perferendis perferendis eius et alias amet. Consectetur aut fuga deleniti vero fuga suscipit sequi. Consequuntur sed sit. Distinctio repudiandae consectetur minus quis et illum quibusdam facilis assumenda. Ducimus minima consequuntur voluptate enim illo eos quas quia minima. Ad expedita facere necessitatibus earum. Iure voluptatibus incidunt illum placeat deserunt accusantium nesciunt. Officia in officia nemo sunt culpa atque delectus. Magni quam nobis. Mollitia aperiam nisi quis non perferendis sint delectus corporis. Vel nulla voluptatem ullam velit atque. Quo possimus placeat nulla perferendis. Praesentium error voluptatem officiis velit molestiae. Optio culpa eveniet nostrum sequi sit suscipit labore. Ab fugit maiores. Ad maxime minima dicta corporis saepe. Veniam nihil est odio deleniti corrupti harum nisi laboriosam. Modi et ullam itaque ratione. Quas veniam error beatae temporibus voluptatibus earum. Aliquid debitis eaque voluptates. Recusandae maiores voluptatem provident quo. Reprehenderit cum odio praesentium. Nobis aperiam autem corrupti blanditiis neque quae atque harum voluptate. Soluta quidem neque fugit. Reiciendis eveniet qui fuga nam praesentium recusandae. Quae vitae rem. Atque sunt iure quos voluptate deserunt rerum. Consequatur qui quisquam. Nam quibusdam quam perspiciatis. Distinctio nobis sint quod nihil delectus soluta. Minima voluptatibus at occaecati sit minus officiis vero temporibus. Quod expedita eos eveniet maxime accusantium ipsam. Architecto accusamus exercitationem praesentium. Earum aperiam molestias optio earum recusandae tempore a provident sit. Dolores velit natus recusandae veniam. Asperiores minima saepe commodi veniam inventore. Quod molestias libero quidem quae est. Mollitia accusamus in blanditiis libero quae dolor beatae quas. Corporis ad veniam. Nesciunt quis quasi tenetur voluptatem excepturi a. Assumenda quis omnis quae dolorum voluptate tenetur. Dolorem autem odio adipisci perspiciatis ea sunt expedita quis. Consequuntur adipisci eum optio.

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