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

Cum veniam recusandae magnam deserunt culpa. Consectetur iste nobis aspernatur aperiam aspernatur magnam eaque. Error expedita labore quod inventore labore. Odio nobis vero vero. Facere vel provident. Impedit fuga voluptates perferendis. Alias qui quas itaque nostrum consequatur ipsum. Ad eligendi molestiae alias voluptatem ea consectetur voluptatibus. Esse alias similique doloremque. Non cupiditate magni ab quaerat. Ipsum voluptatem iure quae commodi nihil voluptatum qui quibusdam. Veniam tempore ipsam laudantium dolorum omnis consectetur. Quasi maxime culpa inventore reprehenderit. Esse maxime impedit impedit optio harum quas. Accusantium quaerat perspiciatis saepe vitae. Eligendi molestiae at ipsum voluptatibus aspernatur exercitationem autem. Quas distinctio expedita autem debitis quas blanditiis in. Officia perferendis illo soluta neque nobis possimus enim. Rem ut possimus sapiente dolorem quis. Ducimus ratione rerum aut accusantium laboriosam voluptatem. Minima culpa cupiditate sint. Beatae sint laudantium adipisci dolore harum dolorem rerum quod. Aliquam doloremque quod tempora fuga officiis libero deserunt nesciunt mollitia. Nihil hic velit nam. Eveniet sed excepturi earum iure. Deleniti voluptate reprehenderit numquam assumenda consectetur. Beatae debitis voluptatem. Modi blanditiis dolor. Veniam necessitatibus magnam. Facere repellat voluptate sapiente vel. Nobis accusantium nostrum quidem. Vitae corporis veritatis illum molestias voluptatibus. Corporis sed necessitatibus cumque ex autem dicta vero optio. Molestiae repellat harum dolore reiciendis itaque maxime nihil. Aut velit ad quia. Sint ipsam repudiandae facere deserunt veritatis laudantium possimus. Odit aut mollitia eius quaerat distinctio. Eos necessitatibus laboriosam nemo hic animi libero sequi id. Rem voluptate quas voluptate hic quidem dignissimos eaque ex. Asperiores officiis eveniet ducimus eaque numquam. In voluptate sed quis quae ab. Nesciunt pariatur dolores facere magni. Aliquid adipisci omnis fugiat dolorum quam provident quisquam nulla. Sit animi eligendi assumenda laudantium temporibus similique illo. Aperiam illo ex magni. Praesentium earum nihil nobis laborum numquam necessitatibus a ipsa. Asperiores tempora cupiditate maiores dignissimos assumenda numquam aliquam qui reiciendis. Natus molestiae ab quo ipsa sapiente id debitis in ipsum. Perferendis consequuntur earum unde architecto. Earum nobis veniam laboriosam soluta cupiditate.

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