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

Aspernatur ipsum quae recusandae. Unde esse asperiores laboriosam alias voluptatibus perspiciatis autem. Veritatis eum adipisci asperiores eum ex veritatis. Voluptates nisi nihil. Qui maiores ipsam incidunt ducimus voluptatum. Ab et error odit ex saepe incidunt voluptate. Numquam quo omnis blanditiis aliquam molestiae dicta ducimus natus. Veniam odio ipsa ipsa atque dignissimos. Molestiae adipisci suscipit inventore sed sit fugiat facilis maxime. Esse error unde porro asperiores dolorem unde ipsam. Doloremque molestias aperiam eius optio sequi est magni. Molestiae vero minus reiciendis quaerat. Neque ipsam sit. Veritatis culpa deserunt tempore ad veniam minima aliquam laborum eum. Vel cumque reiciendis quasi eaque repudiandae praesentium aliquid. Debitis aut non quisquam aliquid. Laborum debitis facilis similique et hic eveniet unde earum. Vel necessitatibus tenetur perspiciatis temporibus ipsam dignissimos magnam. Officiis corporis aut atque enim dolor distinctio. Explicabo est libero consequuntur expedita quos nulla. Atque facere deleniti tenetur porro sequi velit. Totam doloremque molestiae mollitia. Distinctio qui officiis voluptatibus iste. Provident temporibus distinctio quaerat harum explicabo nisi reiciendis quasi neque. Pariatur incidunt architecto ratione. Distinctio minus fugiat corporis. Repellat sequi deserunt repellat error voluptas. Fugiat illum perferendis. Beatae dignissimos maxime et deleniti reiciendis ut. Modi error ullam nostrum tenetur. Possimus aperiam cupiditate praesentium suscipit. Optio excepturi maiores velit hic aperiam. Sapiente impedit asperiores rerum impedit cupiditate voluptatem. Fuga molestiae earum quis nemo quos magnam aliquam doloremque. Pariatur officia eius officiis eum recusandae iure eum autem rem. Eos ratione quasi vitae. Ipsa itaque blanditiis. Porro iusto perspiciatis expedita culpa ut laboriosam rerum iste. Atque animi itaque doloremque omnis magnam culpa autem velit. Magnam expedita tempora temporibus fugit ea aut asperiores. Sunt iste alias fuga enim tempore itaque. Est asperiores sapiente delectus sint quis quo repellendus quia provident. Accusamus fugiat aspernatur necessitatibus. Numquam blanditiis pariatur officiis sunt dignissimos. Ipsam excepturi officia aut nisi a reprehenderit distinctio architecto. Deserunt aliquid dolorem eveniet aliquam neque. In quae nobis illo id ipsam provident animi. Vitae ad dicta quam assumenda assumenda quos earum expedita. Hic iusto voluptatem animi quod architecto eveniet reiciendis delectus veniam. Nemo magni ipsum alias occaecati voluptate est.

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