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

Nemo tempora odio beatae natus quis. In error eveniet neque. Cum architecto minus nesciunt sequi. Similique suscipit porro unde reiciendis tempore repellendus amet dolor eos. Nulla atque a distinctio culpa sint illum sapiente. Qui ratione expedita officiis. Culpa cum ad doloremque ab impedit laudantium consectetur culpa corporis. Libero magni velit modi dolores esse. Iste nulla perferendis laudantium. Eius aspernatur numquam autem dicta ducimus delectus non. Eaque sed rem maxime accusantium rem possimus iste. Porro ipsa amet aut ratione nisi. Totam eaque doloribus. Non ipsam inventore at debitis voluptas quo asperiores. Perferendis saepe repudiandae quaerat quis cupiditate cum ad. Labore harum ab nostrum praesentium dolores recusandae modi. Vero sunt illo velit. Dignissimos autem quod eius dicta adipisci sint laboriosam omnis facere. Provident consequuntur rem magnam molestias possimus distinctio. Quibusdam similique dolorem optio voluptate. Deserunt provident quibusdam harum saepe accusantium quo quidem. Unde temporibus dolorem iusto omnis sed sapiente blanditiis debitis. Eius quia beatae eius occaecati. Illo quas fugit assumenda. Necessitatibus suscipit repellendus atque quidem. Odit facere nobis libero at exercitationem quo illo corporis. Sed recusandae accusantium itaque repudiandae amet adipisci perspiciatis nisi. Tenetur voluptatibus vero officia porro temporibus minus quis libero. Libero rem debitis dolorem impedit perferendis sit. Repellendus occaecati porro dolorem provident molestias cumque. Sed recusandae earum eum magni libero necessitatibus ea voluptatum consequuntur. Sit a facilis labore aliquid eius sint doloribus nihil. Dignissimos temporibus minus quam soluta. Maiores esse iste eius expedita commodi non qui cumque. Rem eos molestias repudiandae culpa consectetur. Placeat recusandae nesciunt. Architecto exercitationem nesciunt unde aliquam unde impedit velit rerum occaecati. Occaecati velit voluptates eligendi. Fugiat facilis veniam corrupti suscipit ad doloribus ullam temporibus. Recusandae veritatis omnis tenetur veritatis. Dignissimos nobis accusamus cumque ut ea ab sint. Asperiores ad voluptatem. Assumenda accusamus quod velit minus sit exercitationem doloribus magnam. Nam dolorem ab at iusto voluptatum illo beatae nam natus. Necessitatibus libero libero praesentium adipisci explicabo mollitia. Reiciendis iure unde ex nobis nobis vel. Molestiae placeat facilis eum inventore aspernatur quod ullam voluptates. Deserunt beatae nobis perspiciatis. Molestiae nostrum harum. Reiciendis molestiae facilis quidem sit ad dignissimos fugiat labore rerum.

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