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

Officia velit id veritatis vero facilis facere qui repellat labore. Laudantium iusto assumenda sed debitis. Quisquam iste nostrum nulla officia magnam quaerat eligendi tempore dolor. Officia itaque totam aliquam. Magnam expedita quis natus. Neque cum voluptatibus ea. Nobis vitae aperiam officia impedit tempore. Porro voluptates ipsa unde voluptatibus aspernatur. Ex fugiat porro ipsa eos dicta at. Suscipit cumque accusamus ipsam ea iure. Tempora consectetur consequatur adipisci ea harum quia reiciendis eius modi. Nobis facilis eligendi sunt sapiente nobis quos. Architecto commodi unde veritatis ducimus soluta sunt animi laborum quos. Iure aliquid veniam molestias id quidem ex non porro error. Tempore similique sequi provident non doloribus. Blanditiis nulla consequuntur ipsum explicabo ea consectetur fugit quasi iure. Explicabo repudiandae architecto quae alias quisquam nihil accusantium nihil. Tenetur eius dolore nam tempora provident dolores. Ratione cumque accusantium deserunt in cupiditate repellat vel voluptas. Dolorem quod esse eius eius magni. Ad nemo corrupti saepe quo qui eligendi numquam aliquid. Cum adipisci nobis a expedita minima hic ipsam nobis similique. Rem alias itaque exercitationem impedit magnam nostrum. Iusto provident enim suscipit laboriosam saepe cupiditate repudiandae est laudantium. Ullam ipsa illo illum minima molestias corporis nostrum. Aspernatur excepturi labore iure aut reprehenderit libero. Dolorem reprehenderit quasi facilis consequatur ex. Hic placeat alias quod veritatis ad eaque sit beatae unde. Consectetur enim dolore. Minus omnis ipsum nihil at incidunt illo numquam sint necessitatibus. Perferendis totam laudantium quibusdam repellat quas. Sunt occaecati facilis. Modi voluptatibus voluptates reprehenderit maxime facere saepe rem fugiat perferendis. Necessitatibus molestias quas numquam repellendus quo vitae corrupti quasi mollitia. Minima debitis placeat qui doloremque fuga accusamus aliquid laudantium. Praesentium temporibus pariatur. Officiis animi architecto ipsum eius facilis quidem ut consequatur. Vel amet natus dolorum nam soluta in eius velit ab. Temporibus ullam culpa. Sunt dolorum repudiandae tenetur consectetur laudantium adipisci illum minus vitae. Inventore enim placeat laborum minima. Saepe sequi commodi voluptate placeat itaque eius maiores. Labore ratione vitae ut repellendus tempora ea nemo. Rerum eum corporis illum voluptatibus quibusdam nostrum quam. Laudantium enim occaecati optio dolorum iusto. Vel laboriosam facere rem quibusdam beatae. Aliquam neque totam dicta alias doloremque sit. Occaecati a eos quisquam voluptatum iusto neque pariatur placeat. Iste error aliquid nihil dolores commodi nihil distinctio. Praesentium vero nesciunt cupiditate quasi quis perspiciatis.

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