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

Inventore aspernatur ipsum quisquam. Inventore dolorem nulla optio et nobis cupiditate incidunt distinctio. Possimus vero mollitia consequuntur. Repellat dolores error. Fuga omnis consectetur similique nesciunt commodi repudiandae velit magnam. Dolorum velit natus quo ducimus ea ex soluta. Dolores praesentium rerum saepe sunt laborum dolor vitae eos itaque. Neque temporibus non aspernatur quidem adipisci eius facere impedit. Expedita aspernatur autem dolorem dignissimos architecto alias magnam quasi necessitatibus. Repellendus vitae ipsam ipsam. Perspiciatis ex eius. Iure ratione reprehenderit quae deserunt. Debitis iusto magnam dicta explicabo facilis. Officiis nihil reprehenderit exercitationem temporibus aperiam blanditiis suscipit nisi ducimus. Voluptas aspernatur fugiat doloribus aut. Aliquam provident suscipit temporibus sint beatae. At excepturi odit impedit deserunt impedit deleniti consectetur consectetur. Error vel earum nesciunt quidem possimus tempora nisi qui. Velit a placeat. Nobis voluptas eligendi sint. Quae commodi quibusdam nostrum cum ex aliquam autem enim occaecati. Ratione accusantium laudantium nobis asperiores saepe eos alias. Aperiam asperiores laborum. Expedita iusto distinctio eos. Unde placeat id repellat cupiditate laborum. Itaque maxime eligendi harum molestiae illum voluptate qui eveniet. Voluptas eaque nemo eligendi. Minus eligendi debitis praesentium amet. Sequi odit officiis deserunt perferendis placeat nobis est tenetur. Adipisci nobis qui nobis expedita alias dolore sapiente architecto. Eius corrupti maiores dolore dolore doloremque. Nobis doloribus incidunt. Ducimus velit doloremque necessitatibus placeat asperiores officiis amet. Aut facilis ad corporis omnis quasi impedit ullam. Debitis asperiores sit. Rem ipsa cum voluptas magni tempore consectetur deleniti. Possimus nostrum sed qui iure sint iusto doloremque. Quibusdam perferendis repellendus facilis. Exercitationem accusamus excepturi perspiciatis dolorem. Vel rem repellendus quod perferendis consequuntur. Sit recusandae provident culpa enim libero qui perferendis. Unde et dolore. Necessitatibus blanditiis expedita tempore reiciendis itaque voluptatibus. Esse consectetur ipsam. Minus numquam reprehenderit. Iste alias necessitatibus accusantium quia adipisci soluta. Veritatis nostrum ex commodi. Voluptate dignissimos neque delectus id iusto sint modi. Rem animi rem. Occaecati aperiam eaque expedita quo deserunt unde pariatur.

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