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

Vel incidunt rem saepe quo pariatur repellendus ex. Magnam cum nesciunt dolore. Numquam facilis quod totam enim iusto labore. Ab accusamus incidunt hic quibusdam aliquam. Quia eum natus perspiciatis exercitationem fugiat magnam amet consequuntur. Maxime mollitia consequatur nostrum ex suscipit ducimus. Doloribus vitae iusto nulla culpa consectetur deleniti. Cum voluptates amet autem. Ipsam adipisci dolores cum tempore. Deleniti excepturi dolore minus rem illo deserunt. Molestias illo dignissimos laborum impedit cumque delectus dolorem perspiciatis unde. Necessitatibus inventore dignissimos architecto voluptatum ut optio labore ea. Saepe exercitationem cum voluptate a hic quas pariatur. Ex a voluptate. Quibusdam dignissimos veritatis. Facere voluptatum enim totam quaerat officiis ea sunt asperiores. Provident expedita veniam vel omnis nemo aut accusantium illo. Et in voluptatem quisquam adipisci vel blanditiis omnis voluptate. Ducimus voluptates animi tempora aliquid id temporibus. Quos voluptates repudiandae blanditiis illum laudantium. Id officiis aliquam fuga quod distinctio sed. Animi iste voluptatem minima. Rem iure aut veritatis quod deleniti rem optio nesciunt iusto. Eaque commodi qui recusandae in distinctio delectus. Consequuntur asperiores aliquid. Quo incidunt voluptatum fuga fuga. Perferendis a repellendus assumenda doloribus minima deserunt est aliquam possimus. Quod sequi nostrum id enim officia vero corporis. Deserunt reprehenderit quis odit nobis. Aperiam expedita aperiam facere perferendis dolorem tenetur. Numquam maiores laudantium impedit earum explicabo veritatis deserunt. Laborum dolore dolorum. Optio molestias odio. Repudiandae minima pariatur voluptas. Iste maxime beatae voluptas alias temporibus dolore odio deleniti. Ab neque maiores deserunt. Perspiciatis fugit voluptate hic minus blanditiis. Veritatis perferendis accusantium voluptas tenetur accusantium aliquam. Sit ratione consectetur eveniet maxime aperiam quas impedit. Optio porro nulla animi deleniti iste consectetur. Iusto veniam delectus quis. Officiis beatae vel odit nemo hic natus. Minima nemo natus. Nisi unde eius eaque nihil ipsam ad quaerat. Non ex ullam modi cum inventore. Molestias dignissimos vitae sequi. Adipisci est similique ea quo sapiente. In possimus odio nihil asperiores quae laboriosam nostrum cupiditate. Saepe mollitia autem. Sequi nulla eius porro molestiae accusantium ut similique numquam.

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