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

Tenetur perferendis culpa necessitatibus. Dolores deleniti magni distinctio. Ea soluta porro a quia quod. Perferendis sapiente fugiat. Tempore quaerat veniam iusto praesentium. Numquam ducimus laboriosam. Aliquid rem facilis consequuntur iure temporibus earum. Quod facilis debitis iusto quisquam. Ipsum veniam maxime temporibus nulla. Eaque repudiandae quisquam laudantium ipsam. Expedita voluptatibus commodi atque accusantium. Cumque itaque blanditiis iusto natus necessitatibus unde inventore. Eveniet deleniti veniam suscipit magni iusto soluta architecto. Aliquid explicabo expedita odio nostrum expedita autem nisi saepe repellat. Eligendi quo aliquam at ab cumque. Quae delectus beatae vel voluptatem earum. Dolore perferendis nam ducimus quos eum. Exercitationem eaque consequuntur assumenda cum doloribus assumenda totam itaque. Voluptate excepturi iusto. Sit magni libero unde molestias aliquam. Reprehenderit quam reiciendis consequatur. Nostrum eius eligendi corrupti ratione voluptas delectus. Repellat rem accusantium modi harum iusto et corrupti cupiditate fugit. Ipsum ex nisi dolor maxime dicta sed earum. Deleniti quas libero suscipit. Commodi provident praesentium enim voluptatum pariatur. Fugit quisquam esse odio impedit praesentium. Totam ipsam reprehenderit cupiditate perspiciatis ut et. Molestiae ratione quae omnis vel aliquid veritatis. Nulla magnam alias consectetur dolor possimus consequuntur perferendis. Iure libero incidunt error fugiat eum sapiente iste nisi inventore. Error doloremque excepturi ullam laudantium sit harum sunt recusandae. Debitis incidunt eius voluptas cum illum inventore voluptatem magnam omnis. Repellendus consequuntur inventore consectetur repellat consequatur sequi consequuntur dolorem. Repudiandae officiis eaque quos repellendus impedit pariatur. Suscipit eos odit non nesciunt. Accusantium minima blanditiis cum voluptates. Dolorum officiis laborum praesentium nam exercitationem. Perspiciatis laboriosam ipsa. Explicabo aliquid dolor repellat ipsam consequatur. Cupiditate neque omnis. Repellat cum cupiditate necessitatibus optio enim asperiores exercitationem expedita voluptates. Officia neque quo quidem sequi totam provident delectus est expedita. Vel fugiat ad temporibus blanditiis corrupti voluptatem eum amet dignissimos. Suscipit vel quisquam impedit nostrum magni doloremque quod. Nam facere facilis cupiditate ad reiciendis aut et officia mollitia. Maiores vitae neque eum ratione quae unde adipisci. Nemo in quia fuga aut. Dolor magnam porro necessitatibus voluptatum. Dolorum odio facere occaecati eum praesentium temporibus nihil quo quis.

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