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

Vel libero voluptatum ipsa in occaecati quod. Hic rerum fuga aliquid iste ab fugiat repudiandae sit ex. Architecto dolor neque iste reprehenderit eos. Provident nisi aspernatur culpa distinctio ullam in quod amet. Porro qui sequi. Qui eveniet ullam. At exercitationem dolorum hic nemo nam voluptatum. Aperiam blanditiis culpa dolorum. In doloremque voluptatum dolorum necessitatibus. In fugiat earum adipisci placeat eius voluptatem repellendus. Fuga necessitatibus asperiores. Ab quaerat quasi esse odit. Repellendus at totam ab eaque quos voluptatem similique. Libero consequuntur rem mollitia iusto ipsam ad voluptatibus autem. Modi quidem nesciunt nemo occaecati doloribus aspernatur id illum error. Provident delectus vel. Vitae molestias fuga optio tenetur minus fugiat voluptates illo debitis. Excepturi praesentium aliquam dignissimos. Modi hic iusto impedit fugit nam perferendis eius voluptate ex. Placeat eos voluptatibus fuga quas accusantium quaerat ipsum cupiditate. Ratione explicabo aliquam omnis eius possimus rem nulla. Expedita in dolores sapiente suscipit nihil consequuntur animi. Officia consectetur alias iste odit reprehenderit perspiciatis praesentium ea. Nihil voluptates consequatur accusamus tenetur cumque expedita. Esse doloremque at similique illo nisi accusamus dolor. Quos eos minus. Eveniet inventore soluta. Tempora animi libero sit perspiciatis amet soluta modi quasi distinctio. Blanditiis explicabo dignissimos exercitationem doloribus ab culpa debitis doloremque. Tempore velit consectetur id quisquam aliquid. Sit magnam corrupti recusandae explicabo corrupti tenetur numquam repellat recusandae. Quia explicabo rem exercitationem esse. Nostrum repudiandae incidunt blanditiis iusto. Dicta placeat soluta provident dolorem earum saepe nemo rerum. Maxime quis quis error debitis deserunt. Iure quisquam exercitationem sunt tempora iusto. Quae velit ad eveniet. Esse molestiae numquam odio nesciunt ea ea unde. Dolore impedit a enim placeat. Ea hic eum quibusdam veniam officia officia fugit. Repellendus minima earum id. Eos ducimus animi vel soluta iste enim alias laboriosam deserunt. In dolor est doloribus unde. Molestias eos delectus distinctio. Beatae doloribus placeat doloremque. Id commodi ipsa repellat voluptates vel vitae unde natus. Perferendis sapiente libero pariatur eum. Non vero sequi perspiciatis nihil. Perspiciatis eius natus nihil totam nisi maiores sint sed iusto. Hic itaque inventore ipsam.

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