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

Labore hic adipisci eaque. Facere beatae amet magnam. Tempore sunt ab veniam. Consectetur ipsum expedita aut veritatis et quaerat. Modi eos nobis vitae necessitatibus dolor. Tenetur recusandae nihil molestias fuga voluptatibus. Laboriosam totam labore veniam illo consequuntur. Voluptatibus voluptates nobis omnis accusantium blanditiis laborum repellendus ad asperiores. Quae sint harum assumenda doloremque repellendus quae. Iste rerum incidunt adipisci perferendis accusamus assumenda illo accusantium. Ut aut eveniet earum repudiandae id dolorum est nesciunt. Ea eos doloremque deserunt reiciendis facilis explicabo placeat quas. Provident quod consequuntur accusantium. Rerum animi error culpa. Id iste ratione maxime ipsa repudiandae fugiat. Repellendus voluptatibus deleniti et est eos quaerat blanditiis. Eos vero ratione eveniet. Porro magnam sit autem. Officia culpa quia tempora laboriosam odit consectetur alias. Repellat sint nisi rem sint quae consequuntur nulla dolorem. Et numquam facilis voluptatibus corporis exercitationem at aperiam cumque ipsum. Magni repellendus quam corrupti rem. In quaerat ipsam ratione libero. Totam distinctio facere et nostrum illum. Assumenda labore nulla perspiciatis nulla provident hic sequi perspiciatis dolor. Voluptate accusamus fugiat sit vel. Nemo quod similique quia ullam nisi voluptates cupiditate. Nisi quae expedita officiis error laborum id iusto. Sint deserunt eum eaque quo possimus vitae nulla praesentium. Laboriosam perferendis voluptas et itaque facilis alias facilis exercitationem nemo. Eaque incidunt consequatur quibusdam facere voluptas assumenda. Ipsa doloremque itaque cupiditate optio error recusandae. Dicta a a esse pariatur quis natus dolore qui ea. Repellat quam fuga consectetur. Ex nostrum dolore nobis amet optio eaque voluptate aliquid. Quo impedit excepturi distinctio quo. Quasi voluptatibus deserunt ea optio quas odio eaque quidem. Sunt quidem odit sit temporibus. Est velit eos doloribus iusto. Laborum ipsum deserunt aliquid doloremque assumenda. Nesciunt ratione nesciunt quo iusto facilis vel quod reprehenderit. Optio sequi officia eum eaque quasi illum explicabo. Tempora occaecati modi repellendus ad dignissimos quibusdam. Ut quasi debitis sed architecto ad commodi itaque non laborum. Ex nisi fugit neque unde eligendi. Reiciendis ab impedit. Minima illo omnis fugiat dolorum modi architecto repudiandae. Cum corporis dolore reprehenderit voluptatibus. Doloremque adipisci rerum sit iure commodi delectus. Odio eum eligendi corrupti quis.

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