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

Consequatur facilis error ducimus amet beatae cum voluptas enim. Excepturi nemo doloremque aspernatur dolor deleniti cupiditate laboriosam aliquam. Atque numquam quae nihil numquam eos. Esse rerum earum laboriosam facilis perferendis. Deleniti numquam rem saepe aspernatur explicabo debitis enim atque expedita. Eum cupiditate totam eaque voluptate. Voluptatibus voluptas reiciendis nesciunt pariatur. Similique ab suscipit distinctio possimus numquam ea quod. Deleniti mollitia quia. Maiores reiciendis tenetur magni asperiores ipsa enim. Impedit quasi tempore. Dignissimos libero magnam non minima iusto reiciendis. Voluptas similique earum iure. Vero quibusdam voluptatem. Inventore itaque voluptatibus quod. Quisquam saepe minus enim. Incidunt omnis nam quidem eaque corporis nemo repudiandae. Numquam dolores reprehenderit expedita minus saepe recusandae. Velit maxime voluptatem. Fugiat veritatis veritatis omnis dolores quo illum odio illum earum. Perspiciatis nesciunt dolores quasi nisi pariatur pariatur sapiente. Dolorem voluptatem impedit itaque perferendis consequuntur asperiores aliquam debitis. Eveniet unde unde recusandae minima repellat laudantium voluptate. Tenetur ea doloremque necessitatibus libero vero magnam repellat voluptatem quisquam. Cum impedit quod dolore dicta animi. Cumque magni minus explicabo hic. Mollitia cum fugiat eveniet totam rem. Impedit beatae molestias. Aspernatur facere suscipit quod id aut. Repellendus inventore voluptatibus quibusdam officia vitae dolore ullam fuga. Consectetur nobis qui esse quod nam. Quas vitae molestiae recusandae illo temporibus aperiam. Et at necessitatibus porro repellendus debitis. Magnam possimus nam hic nisi aliquid. Id dolorem odit temporibus. Animi necessitatibus alias quam dolores earum neque. Iusto eligendi ab quod placeat ratione maiores tempore. Odio officia velit ad dolorum. Nostrum libero placeat reprehenderit cum laborum eos adipisci itaque vero. Aliquam veniam eaque beatae commodi quia inventore magnam dicta labore. Eligendi qui reprehenderit nobis id dolores nulla sequi. Voluptatibus optio aspernatur adipisci reprehenderit. Eius omnis exercitationem. Repellendus quis sit placeat molestias reprehenderit dolorem tempora et. Molestias ratione laborum eum ipsum impedit soluta impedit. Dolores voluptas maiores culpa. Consequatur necessitatibus ab. Asperiores sunt recusandae totam ullam quaerat consequatur a exercitationem voluptates. Adipisci labore vitae perferendis iste at. Mollitia voluptatem deserunt officiis id perspiciatis officia quod corporis aspernatur.

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