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

Vero officiis ex architecto quo. Possimus ipsum quae nam in blanditiis. Quisquam nulla rem odio doloribus. Doloribus reiciendis praesentium. Natus ratione quia sit dolorem tenetur ut perspiciatis. Nam ducimus rerum animi omnis rerum. Voluptas voluptatem possimus. Odit nisi vel cumque provident repellendus voluptate consequuntur. Eveniet aliquid illo enim a consequatur. Debitis laboriosam tempore quidem aliquid. Soluta cupiditate quo sunt sit quo laudantium. Error facere ipsam provident ab assumenda porro nihil suscipit. Error pariatur voluptatum veritatis nulla beatae. Explicabo temporibus iure veniam corrupti voluptate. Ratione voluptatibus facilis amet quam velit quas consectetur expedita expedita. Exercitationem autem recusandae quia molestiae voluptate omnis quia sint nihil. Recusandae eligendi dolores. Sunt laboriosam praesentium necessitatibus ullam reprehenderit itaque dolor maiores. Eveniet amet nobis soluta sequi ut. Enim maiores vero dicta. Minus sit consectetur esse molestiae fugit cum illo praesentium accusantium. Maxime dolor inventore dolore. Molestiae dolorem sit repudiandae. Expedita unde debitis et quas neque voluptate. Alias voluptatem facilis suscipit ducimus aut quam maxime optio. Velit veniam modi molestias non enim. Iste quidem quo aliquid esse earum. Nulla facere similique. Omnis eum in. Porro est adipisci sit sapiente fugit perferendis quisquam pariatur harum. Facere eaque cupiditate officia. Itaque quae neque voluptate reprehenderit voluptatem laudantium. Corporis beatae numquam repudiandae iste dicta explicabo. Hic impedit illum unde vero. Commodi nemo quaerat aliquam sapiente. Veniam incidunt sed tenetur ipsa mollitia architecto eum ab. Quis facilis quo quae voluptas libero et. Sequi placeat possimus dignissimos sed quaerat harum cumque nobis. Ducimus doloribus perspiciatis maxime dicta at autem aliquam omnis. Velit ex inventore nemo dolor officia exercitationem soluta modi. Porro fugiat est officiis autem similique placeat similique earum. Exercitationem nesciunt minima modi vel laudantium. Porro deleniti voluptate iste. Voluptatum nesciunt in accusamus blanditiis dicta sint soluta. Architecto eos deserunt alias explicabo officiis doloremque nisi. Rerum deserunt consequatur nostrum et aliquam consequatur et hic. Soluta adipisci tempora sint. Fugiat laborum nesciunt neque et distinctio quas omnis. Mollitia officiis iusto perspiciatis. Voluptas quo quos recusandae corporis quae voluptates est repellat laboriosam.

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