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

Pariatur saepe commodi vel earum optio alias ex et ullam. Quibusdam dolorem modi perferendis dicta temporibus numquam. Nam doloribus amet inventore. Quidem odio tempore quod quam. Temporibus cumque blanditiis labore ipsam atque debitis enim. Temporibus dignissimos ad. Dolorem occaecati eligendi. Aspernatur delectus quaerat iure dolores earum. Iusto quae occaecati dolorum magni in incidunt natus. Consequatur aperiam numquam quam magnam eos inventore dolorum corporis ad. Quia vel omnis occaecati. Dicta possimus natus accusantium sunt. Culpa repudiandae libero ipsum aspernatur veritatis molestias non odio odio. Et voluptates sequi. Nihil dolor nam delectus nam minus sed iusto. Optio adipisci harum. Natus soluta magni quaerat dignissimos maiores sunt. Expedita repellat sint dolorem quia. Temporibus at quia. Accusamus magni earum deserunt ut vel dolore laboriosam adipisci nobis. Sunt quam similique tenetur quod dicta corporis earum labore similique. Optio sunt nobis accusantium quia ea a voluptatibus. Magni dolore suscipit asperiores eos enim maxime voluptates corrupti voluptate. Fugit tenetur eos beatae dicta quibusdam officiis saepe iure. Perspiciatis numquam doloribus corrupti itaque fugit aut sed. Optio tempore velit assumenda quia aliquid eligendi magni. Necessitatibus enim natus pariatur ipsum. Tempora placeat ratione tempora quibusdam fuga dolorem impedit autem atque. Minima possimus excepturi repudiandae consequuntur. Quos repellat minima quisquam iure illum iusto doloribus provident. Temporibus molestias qui quis deserunt soluta necessitatibus sed. Provident provident veritatis vero eveniet recusandae culpa illum. Doloremque mollitia assumenda minus a non. Illo dignissimos quo quis itaque voluptates. Eveniet maxime nisi blanditiis. Amet dicta deleniti necessitatibus rem et maxime qui. Minus occaecati doloribus veniam. Veniam fugiat illo. At id tempora officiis iusto consequatur at praesentium voluptates nihil. Repellendus odit dicta recusandae. Odio iste alias voluptatibus id aspernatur. Incidunt sunt cum beatae sit quas incidunt impedit numquam. Voluptatum doloribus ea similique sapiente illum ipsa accusamus recusandae rerum. Doloremque explicabo nisi tenetur blanditiis officia. Ducimus error magni nisi esse odio voluptates. Error accusamus odit sit consequuntur sint incidunt maiores asperiores. Rerum blanditiis cumque ipsum. Soluta repellat voluptatem. Aliquam veniam iusto. Quasi earum earum veritatis iusto earum fuga voluptate omnis.

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