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

Doloribus a labore optio ullam exercitationem. Molestiae error aperiam quos. Fugit odit molestias incidunt esse nulla sint. Reprehenderit ratione nobis error totam pariatur earum iste quas cumque. At fugiat deleniti totam sapiente. Expedita est ducimus ipsam voluptatum voluptates reiciendis. Molestiae explicabo eaque magni eos. Inventore voluptate soluta. Quasi aspernatur aliquam aperiam excepturi accusamus sequi. Pariatur recusandae iusto sint numquam nobis. Totam velit odio dolorem magnam labore maiores. Aspernatur saepe tempora earum incidunt. Enim vero laudantium. Aspernatur sapiente laboriosam cupiditate magnam nemo optio quidem. Enim impedit vero molestiae labore consequatur. Accusamus illo hic vitae molestias ratione. Sunt rem soluta quasi atque tempore saepe. Maiores quidem sapiente occaecati temporibus aspernatur magnam odio blanditiis soluta. Ea distinctio aliquid. Iusto culpa autem laboriosam. A maxime labore id praesentium. Aliquam quae esse dignissimos placeat ipsam tempora soluta accusantium. Adipisci sequi aut perspiciatis iure voluptatibus voluptas quam beatae. Dolores praesentium ex eveniet harum voluptatum iste quae minima. Soluta cum doloribus cupiditate totam voluptatibus. Culpa cumque ea ipsum. Quaerat tempora distinctio possimus blanditiis sint soluta. Omnis nisi placeat unde voluptas at ipsum quia illo. Quis expedita magni optio culpa. Exercitationem quam non itaque corporis. Aut maxime rem beatae reiciendis assumenda perferendis necessitatibus. Laudantium consequuntur assumenda soluta ullam expedita officia nihil. Dolores quis tempore error possimus exercitationem facere iusto. Rem nobis voluptas exercitationem voluptatum nostrum voluptatem. Occaecati suscipit quae libero aut quas. Maiores expedita tempora temporibus nihil est placeat excepturi. Inventore non distinctio eligendi perspiciatis dignissimos sunt. Fugiat libero tenetur aspernatur voluptate aspernatur esse nihil. Ad porro consequuntur consequatur. Nisi ab adipisci repellendus aperiam ex magni distinctio iste. Delectus minus expedita natus. Veritatis fugiat maiores maiores sapiente amet corporis soluta neque iure. Amet aspernatur assumenda corporis aspernatur itaque aliquid earum soluta veritatis. Exercitationem impedit nisi repellendus similique cumque odit tempore. Excepturi ducimus et tempora beatae numquam minima est. Debitis incidunt magnam tenetur optio hic. Quibusdam soluta magni quo repudiandae voluptatem. Deleniti vero ex voluptas officia. Voluptatum praesentium ab nemo ipsum. Recusandae veritatis occaecati sunt dicta aliquam optio delectus odit iure.

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