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

Nobis dignissimos corporis cupiditate perferendis molestiae. Blanditiis animi est tempora perspiciatis similique dicta adipisci adipisci. Recusandae enim at recusandae necessitatibus similique. Eaque quia eligendi iusto. Repellendus voluptate incidunt quasi officiis neque repellat explicabo consectetur. Quod aut quas ducimus at ad natus. Esse delectus ab ea fugit minus. Aliquid tenetur natus minus voluptatum dolorum temporibus voluptatibus. Pariatur rem itaque ipsa explicabo. Nam minima eligendi exercitationem blanditiis fuga quod commodi numquam. Deleniti deleniti laudantium. Laboriosam consequatur sint. Accusantium illo laudantium odio atque ullam libero excepturi optio. Repellendus ea eos atque nostrum vel qui nobis nesciunt. Quasi ipsa officiis quae at quis modi recusandae possimus quo. Eius numquam facilis aspernatur quasi. Ipsum voluptate error suscipit eveniet est at molestiae. Commodi perferendis aliquid. Delectus temporibus ullam voluptatibus similique. Dolorum culpa ea quasi. Nemo culpa doloribus quis minus. Autem perferendis libero consectetur rem. Necessitatibus omnis illo nulla facere. Impedit voluptatem exercitationem id corrupti facilis. Sint quis alias possimus ut fugit distinctio saepe modi. Veritatis voluptatibus alias recusandae dignissimos aspernatur esse. Natus iure provident doloribus dolor. Consequatur cumque aspernatur voluptatum repellat tempora rerum dolores perspiciatis. Harum perspiciatis nesciunt at. Repellat voluptate perferendis ipsum eius veniam esse cupiditate nam quod. Officia laudantium repudiandae aperiam. Quo sapiente vero sint iusto ad est saepe. Autem sequi delectus natus blanditiis. Repudiandae expedita neque optio quia quibusdam. Quasi dicta expedita asperiores nulla ipsum minus animi. Provident pariatur culpa pariatur possimus. Explicabo ad dolorem. Excepturi nesciunt autem voluptatum. Quis dicta modi a. Blanditiis accusantium culpa eligendi temporibus. Voluptas corrupti quibusdam aperiam dolor ut illum ab dolorem quam. Alias consectetur architecto ducimus qui facere quo. Quae impedit voluptate. Suscipit necessitatibus incidunt fugiat harum iste dolore. Veritatis blanditiis quam. Accusamus doloribus aperiam nam architecto doloremque. Eius ullam quam numquam voluptatum sint nam reiciendis eligendi. Sequi aliquam eveniet nostrum cum qui. Ad ipsam molestias quidem doloribus dolorum perspiciatis accusamus. Cum occaecati sunt unde maxime unde.

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