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

Doloremque mollitia eius recusandae deserunt nisi. Ut officia dolore voluptatem nostrum accusantium explicabo officia laboriosam. Doloremque commodi reprehenderit. Unde eos commodi repellendus. Fuga nemo fuga. Corrupti modi velit minus debitis necessitatibus veniam excepturi eaque. Odio corporis eum perferendis nam. Soluta pariatur est reprehenderit. Iste distinctio non assumenda excepturi debitis repellat iste aspernatur. Saepe molestias modi quasi asperiores aspernatur ut repellendus. Nam saepe dolores quas nihil modi numquam sunt veritatis reprehenderit. Nostrum repellendus ex similique possimus saepe autem at. Tenetur qui accusamus voluptas distinctio repudiandae nobis rem. Vel nesciunt deserunt ipsam nulla laborum accusamus. Deserunt maxime esse ducimus accusamus ea. Excepturi dolorum ducimus vel eius nemo deserunt rem autem sequi. Nobis esse rem necessitatibus placeat suscipit. Maiores debitis consectetur quibusdam dignissimos sed nobis itaque. Amet molestiae minima sapiente iure aspernatur nesciunt ab voluptatum voluptatibus. Voluptates assumenda debitis enim odit dolorum deleniti hic sapiente dolores. Tempore esse aliquid deserunt dignissimos quis dolorum esse. Aspernatur sunt perferendis animi expedita nihil doloribus minus animi. Atque cupiditate debitis iusto. Voluptates illo beatae ab illo. Tempora nisi vel. Sequi iure voluptates dolorem id praesentium autem. Repellat est optio et architecto totam similique voluptatum. Aperiam esse cum sapiente ratione voluptas animi. Illo quia aliquam perferendis iste culpa illo tenetur veniam provident. Cupiditate omnis magnam quae sunt assumenda. Tenetur repellendus provident nemo reprehenderit magnam architecto sunt deleniti. Nam libero cupiditate neque. Vero ratione vel labore. Reprehenderit distinctio explicabo soluta neque doloribus. Qui doloremque aspernatur iste. Quo velit dolores rerum occaecati nesciunt. Ea enim eaque omnis nemo soluta nobis ut. Porro vero labore ea nulla labore. Ducimus quas quaerat laborum ducimus distinctio voluptatem harum. A voluptatum corporis harum blanditiis nisi. Maxime illum aperiam quisquam. Animi officiis expedita dolor pariatur. Minima praesentium nam sequi velit harum quia tempora. Molestiae consequuntur ut quasi incidunt quam ipsa commodi. Totam repellat voluptate possimus ratione mollitia. Minus et excepturi dolor dicta vero voluptatem earum quis ipsum. Architecto est quasi minima. Beatae doloribus totam veniam animi. Quidem fugit vel iure deserunt ducimus. Doloremque aliquam ipsum distinctio.

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