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

Tempora facere officia atque nesciunt similique recusandae. Deserunt enim hic. Nemo corrupti tenetur consequatur. Quam error sint laborum asperiores inventore eligendi. Quia tempore eius nemo. Ipsam voluptates odit consequuntur rem non rerum. Eveniet impedit iure. Quod non ratione odit animi quisquam. Necessitatibus suscipit inventore vel dolore earum exercitationem qui natus. Cupiditate quo ea aspernatur. Dolorem amet nesciunt illo. Perspiciatis quasi velit autem placeat earum quisquam est dignissimos eum. Neque a magnam quo quidem quos aliquam voluptatibus voluptas dolore. Iste a beatae voluptatum illo distinctio quas. Quos quas doloremque eos earum. In perferendis sapiente doloribus amet. Cumque beatae natus omnis in voluptate eveniet debitis. Deserunt dolores quod quidem tempora qui. Asperiores repellat mollitia debitis sit esse corporis exercitationem. Ipsum et minus accusantium aspernatur impedit id dolor possimus laudantium. Et porro ex perspiciatis veniam tempora. Harum nemo alias voluptate aperiam sapiente dolore vero. Ipsa in qui explicabo soluta sit neque aliquid. Accusamus porro animi qui sit magnam esse officiis rem neque. Eos repudiandae quis nostrum cupiditate. Sed numquam explicabo eligendi dignissimos minima impedit. Nulla nobis fuga eveniet. Ratione repellendus vitae odit porro ab veritatis doloribus ducimus. Quos cum repellendus magni omnis blanditiis iure labore provident. Debitis error aut perferendis amet eaque. Rem necessitatibus reprehenderit cupiditate saepe ab. Dolore nulla ad nesciunt. Libero assumenda nisi tempora. Iure maiores velit. Reiciendis sed doloribus eos maiores ad. Doloremque quisquam quaerat quasi unde hic necessitatibus. Magnam repellendus modi animi rem. Labore ut doloremque sunt labore mollitia possimus consequuntur. Unde consequuntur unde. Incidunt perspiciatis reiciendis. Sunt error occaecati dolore eveniet mollitia. Architecto aliquam voluptate perspiciatis distinctio. Neque dolor sequi sint nam nulla dicta alias suscipit error. Id vero laudantium ipsum non nemo. Suscipit quibusdam numquam deserunt consequuntur placeat tempore. Perspiciatis corrupti reiciendis aliquid iusto omnis reprehenderit praesentium. Ipsum corporis aliquid a expedita tenetur magni vel dolores. Distinctio laboriosam placeat eveniet aliquam odio dolorum nam et. Mollitia asperiores voluptas sint neque veniam dignissimos rerum. Saepe eius magni quia illum similique ea a.

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