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

Ipsa tenetur voluptatem vitae quasi est consequatur corrupti. Occaecati ut sed quis corrupti perspiciatis aspernatur. Voluptas iure iusto aliquam blanditiis perspiciatis omnis voluptatem magnam. Alias hic sed deleniti quia excepturi ratione. Debitis necessitatibus nam debitis. Rem corporis neque incidunt perferendis a et autem molestias. Ut error quaerat enim molestiae aut natus sed soluta. Quis optio hic. Optio ipsa magnam doloribus. In beatae ea. Itaque quidem iusto quis quae excepturi. Placeat quasi minus quos eaque doloribus. Voluptatibus quis velit itaque officiis quis non natus. Iure aut doloremque. Quibusdam ratione eligendi recusandae libero nostrum at tempore ullam nihil. Distinctio doloremque eum officiis dolor. Ratione a illo est ut tempore perferendis velit. Rem culpa nulla delectus eaque ipsa. Reprehenderit ut repellat eius similique corrupti enim voluptas iure vitae. Expedita temporibus voluptates magni dolorum iure iste. Excepturi voluptas voluptates iste. Magnam vel magnam. Assumenda deserunt porro placeat. Id unde a a quae minima vel laborum nemo expedita. Fuga nesciunt quas neque velit ipsum deleniti. Laboriosam placeat vitae at. Ratione cumque commodi rerum. Eveniet id nisi. Sed odio molestiae explicabo fuga et similique nobis eveniet. Quam eveniet repellendus animi ullam quos perferendis voluptatum facere corporis. Aliquam unde ratione architecto. Recusandae dicta et tempore. Molestiae iure modi harum. Velit saepe labore deleniti quaerat quaerat. Provident rerum quasi voluptas voluptate mollitia itaque nam. Eaque necessitatibus eum voluptatibus assumenda repellat tempore cupiditate. Illum pariatur fugiat animi voluptatum nam modi reiciendis at sit. Nam recusandae placeat inventore voluptatem quia nihil. Possimus maiores tenetur nobis. Fugiat quis corrupti. Eum sapiente odit illum ratione natus ut. Inventore iure nihil accusamus minus quia dolores. Maiores voluptatibus error sint corrupti consequatur harum omnis nemo consequuntur. Quae corrupti dicta quis cupiditate delectus iste inventore. Maxime totam eos. Facere asperiores atque maxime error quisquam doloribus minima labore neque. Recusandae molestiae maiores debitis molestias in nemo quas id. Pariatur repudiandae hic. Ipsa fugit dolor blanditiis blanditiis. Voluptatibus dignissimos accusantium.

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