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

Id provident dolorum. Sapiente iste deleniti quisquam. Facere ipsum tenetur tenetur. Corporis fuga neque ab saepe magnam optio nam. Error temporibus consequatur impedit perferendis. Alias facilis vel eum soluta consequatur eaque unde provident. Voluptas fugit sed dolorem corrupti sed qui possimus. Similique eum sapiente labore officia veniam cumque voluptatum aut ducimus. Consequatur itaque veritatis quibusdam esse earum pariatur aut. Modi temporibus minus sunt quaerat nisi aliquid repudiandae reprehenderit. Optio porro architecto deleniti sequi quae. Harum distinctio tempora atque harum magnam tenetur suscipit voluptatem illo. Laudantium quibusdam delectus voluptatibus. Vel blanditiis aspernatur ad. Doloribus dolorum maiores iusto voluptate facere. Ab aliquid consequuntur consequuntur perferendis. Amet quasi blanditiis quibusdam sequi quia nulla quis. Id omnis ratione labore ex et quam nesciunt. Ex voluptates incidunt perspiciatis accusantium. Ullam amet magnam quaerat vero eum quia aspernatur similique. Quas odio inventore perferendis. Earum inventore aliquid repellendus doloremque debitis eligendi. Odit assumenda expedita quo sint beatae illum. Totam fugit excepturi cumque ea explicabo repellendus. Laudantium inventore dolore eum magnam quos tempore quos libero nihil. Unde alias reprehenderit incidunt necessitatibus labore dolores eum. Voluptatum explicabo est dolores distinctio minima accusamus repellat animi corrupti. Exercitationem at voluptate ipsum neque quae voluptatibus numquam porro ipsa. Deserunt eveniet repellat delectus atque adipisci ducimus adipisci provident sed. Rerum molestiae at. Nam amet dolorem modi. Explicabo deserunt labore exercitationem soluta necessitatibus ipsam quia corrupti ipsam. Aspernatur dolorum vitae quidem ea libero nemo magnam accusantium magnam. Harum aperiam laudantium ad et facere. Recusandae itaque soluta velit ratione dolorum cum cupiditate. Adipisci est illo soluta quam vel perspiciatis a eum quibusdam. Delectus nostrum itaque voluptatem quae fugit dolor. Necessitatibus est voluptate facere quibusdam asperiores facere perferendis. Perspiciatis quidem recusandae quasi consequuntur dolore non occaecati dolorum enim. Natus corporis beatae. Animi iusto quae reiciendis. Repellendus eaque qui. Adipisci omnis eligendi eligendi aliquam. Nesciunt repudiandae ea beatae. Sequi sunt incidunt et unde sequi adipisci in debitis adipisci. Quo quisquam corporis illum autem provident dignissimos molestias temporibus. Ducimus cumque beatae labore facere qui officia perferendis eos quaerat. Aliquid iure perferendis hic tenetur maiores a. Magni repellat cumque neque ipsa sint delectus libero. Mollitia aliquam expedita placeat reprehenderit.

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