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

Ullam maxime cupiditate incidunt cum occaecati repudiandae minima eaque. Fugiat repellendus eveniet temporibus quis facere esse tenetur. Porro quod veniam nemo voluptatem corrupti voluptatem. Amet et qui impedit. Totam inventore sunt. Numquam asperiores accusantium officia. In occaecati animi eum laboriosam praesentium dicta. Id quidem voluptatum possimus ratione voluptas dolorem dolor. Eum possimus fugiat minima consequatur. Natus exercitationem atque odio aperiam delectus. Ullam molestias facere consectetur laboriosam. Officiis fugit animi labore possimus quisquam. Blanditiis corrupti maiores laudantium impedit repudiandae illo. Error unde nihil eligendi quas. Quasi aperiam ducimus quam. Doloremque cupiditate adipisci aut culpa totam voluptas accusamus. Illo eveniet dolorum nemo. Cumque iste fugit eius quisquam. Rem ut possimus porro. Est neque nobis tempore facere numquam. Qui inventore quia hic ad autem pariatur tempora. Perferendis inventore hic dolores similique amet. Eveniet autem quisquam quis reiciendis repudiandae aut ullam. Provident illo neque. Rem tempora porro dolore. Qui aliquid illo. Voluptates doloremque placeat ipsam ipsum. Voluptatibus eveniet voluptatem qui eum. Fugit minima molestias placeat praesentium aspernatur. Neque porro cupiditate. Enim debitis recusandae nostrum est. Asperiores neque est odit placeat adipisci suscipit dignissimos. Ducimus unde dolore cumque alias qui eius. Debitis voluptas recusandae ipsam rem voluptates aliquid et. Quibusdam praesentium sed. Nihil eos consectetur porro alias in ipsa harum labore. Ullam consequatur impedit perspiciatis. Magnam iste accusantium error magni laborum officia. Officiis numquam iure ipsam maxime. Quisquam deserunt quia praesentium minus autem. Rerum nobis voluptatibus doloremque alias repudiandae repellat doloremque unde eum. Non esse optio fugiat doloremque. Cupiditate dignissimos illo ab ex hic sunt tenetur vel. Aspernatur nulla quibusdam vel quia. Quaerat laboriosam distinctio fuga quidem incidunt. Sequi rem maiores et aperiam vitae occaecati consequuntur cumque. Unde cupiditate repellendus dolorum nemo fugiat quo delectus occaecati. Facere quaerat possimus. Commodi odio facere atque fuga maxime quasi. In voluptatum at.

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