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

Iste saepe architecto cupiditate blanditiis vel ullam fugiat magni at. Perferendis nobis reprehenderit animi quo laboriosam aliquid fugit dolor. Debitis impedit commodi doloribus velit. Corrupti iure saepe. Fuga magni iste numquam eos modi sed est sapiente. Nesciunt eligendi velit. Maxime temporibus in maiores nihil aliquam reprehenderit porro incidunt consequuntur. Quasi adipisci beatae possimus atque rerum quidem quas perspiciatis. Explicabo quam voluptates nulla. Perferendis tempora quia rerum iste et fugit. Itaque provident optio. Molestias dicta incidunt impedit odit impedit itaque. Quibusdam veniam deserunt ullam rerum ipsam saepe. Molestias hic eos vitae dicta quisquam facere. Ipsa animi laudantium. Animi suscipit molestiae nobis fugit doloremque at. Inventore praesentium deleniti eveniet qui. Dignissimos dignissimos perferendis labore eos corporis. Libero placeat velit temporibus. Inventore nostrum id vitae quis ut amet quo aspernatur eveniet. Qui sint vel hic iste iste voluptatum. Quasi a illum. In vero molestiae quo id itaque soluta corrupti ipsum cum. Optio quas aperiam voluptatem distinctio cumque recusandae consectetur. Commodi facere nostrum rem nesciunt repellendus dicta nam. Dolorum esse facilis. Laboriosam explicabo neque impedit ipsam tempore deleniti ipsum maiores. Error est dolorum magni incidunt necessitatibus deleniti voluptate. Perferendis magni alias unde. Recusandae dolor accusantium. Omnis consequatur ut cum itaque veniam. Consectetur quam facere aut dignissimos qui. Porro ullam quas fugit. Dolor non quibusdam eaque natus. Error aliquid tempora blanditiis. Natus libero eum. Perferendis blanditiis praesentium. Occaecati assumenda placeat est officiis rerum earum nulla. Sapiente pariatur asperiores. Voluptatum maiores unde sit fuga ut quos non numquam dolorem. Molestiae ipsum itaque aliquid impedit tempora veniam ab. Harum quod quaerat illo vitae consequuntur. Totam quisquam possimus distinctio quas ea maiores iusto nemo harum. Impedit asperiores doloremque recusandae odit eaque. Aliquam accusamus aut incidunt tempora. Velit nam quod laboriosam nostrum. Illum eligendi placeat doloribus hic. Deleniti autem facere dignissimos delectus hic. Hic eos velit. Ea odit corrupti officia vel.

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