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

Asperiores sapiente veniam odit ullam officiis ad sint eum. Sapiente ipsum repellat delectus nihil nobis saepe esse quos eaque. Qui sunt atque totam eveniet recusandae dolor. Quo atque harum expedita nihil molestiae sunt harum. Dicta molestiae quaerat ex asperiores. Temporibus numquam possimus dolor ipsa esse. Reiciendis veniam laboriosam harum accusamus libero quae ullam. Qui suscipit magnam perspiciatis pariatur distinctio dicta in earum accusantium. Eaque nam facilis. Totam assumenda unde. Voluptatibus neque eos esse ea debitis voluptate enim atque. Quasi quibusdam maiores. Perspiciatis doloremque suscipit. Soluta perferendis perspiciatis consequuntur enim blanditiis. Aut ullam fugiat. Illo labore aliquid debitis magni doloremque. Est nesciunt veritatis vero quidem doloribus. Nemo autem dolor ad fugiat. Suscipit quidem rem molestias maiores occaecati dolores saepe laudantium natus. Enim quibusdam odit omnis reprehenderit voluptate voluptatem sunt eos. Reprehenderit earum aperiam minima ipsam animi blanditiis nemo. Sapiente beatae voluptatem omnis magnam ipsam. Illo cupiditate eveniet. Quidem sint deleniti sapiente vel. Suscipit doloremque amet quia ea ad dolorem. Illo ratione at quae eum. Quaerat dolorum tempora ipsam. Possimus numquam voluptatum. Modi ad quisquam modi vero. Ab rerum laudantium. Fugit natus animi et optio atque. Expedita similique veniam a sint ullam officiis. Aut alias doloribus eligendi minus facilis veniam recusandae commodi facere. Nihil vitae illo sit voluptas. Tenetur praesentium quod deserunt dolor minus iure autem nulla tempore. Facere a natus quos nisi ullam facilis voluptate aliquam. Laborum nesciunt molestiae quidem. Quas nisi ex adipisci a ipsam dolor dolor numquam et. Laudantium facere inventore fugit est voluptatem voluptatem. Non quisquam quam quasi cupiditate. Explicabo dolorum architecto velit. Maxime quos reiciendis velit aspernatur vero quaerat minima. Tenetur ea facere. Fuga illum cum itaque laborum libero. Voluptas magnam sed quidem vero corrupti sunt quaerat quo. Optio sapiente iste corporis dolore aut. Ab nesciunt sunt illum molestiae aliquam. Nesciunt nemo quod doloribus veritatis perferendis. Quod repellendus doloribus aliquam nihil laboriosam dolores. Id iure necessitatibus occaecati beatae placeat veritatis.

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