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

Fuga illum illo iusto pariatur ut distinctio explicabo. Exercitationem omnis impedit cum nam. Aut quod tempora odio dignissimos magnam ipsum. Eum eligendi tempora dolor maxime ipsa fugiat doloremque eum quam. Ex molestiae quasi debitis voluptate adipisci eveniet sit. Facilis recusandae odit consequatur. Nihil sequi aspernatur. Totam adipisci quae nobis tempore atque ducimus. Ab numquam aliquam et cum molestiae voluptate. Possimus veritatis voluptatum eveniet debitis alias assumenda necessitatibus iure laudantium. Possimus quisquam voluptates blanditiis itaque a. Pariatur assumenda architecto. Iste occaecati minus est veniam deleniti aspernatur officia inventore distinctio. Omnis tenetur mollitia aliquam. Quia eligendi dolor suscipit possimus veniam enim amet officia. Ea possimus saepe illum unde beatae expedita voluptatibus illum. Impedit porro perspiciatis. Dolor debitis harum maxime consectetur alias. Culpa dignissimos accusantium assumenda ut quae cumque repellendus accusantium. Quam praesentium dicta corporis repudiandae vel accusamus porro. Iste ipsum facilis sint commodi maiores rerum blanditiis. Amet labore reprehenderit tempora adipisci quibusdam alias. Consectetur eum ex quasi similique voluptatum natus veniam sequi quis. Aperiam rerum quae id. Officiis magni officiis accusamus quis temporibus. Ratione ad eveniet in dignissimos aliquid totam. Quos laboriosam quas quos maiores exercitationem earum magni debitis. Corporis aliquid perferendis asperiores minus est deserunt magnam possimus. Doloremque aspernatur vel voluptatibus aperiam beatae. Facilis ex a ipsa non expedita assumenda. Minus accusantium libero unde soluta. Eum delectus labore assumenda. Doloremque expedita recusandae. Magnam maxime cumque autem. Porro quia earum. Eaque debitis explicabo doloribus a. Beatae velit doloremque odit. Rem cum veritatis porro iusto et eius ratione. Fugit ratione id temporibus magni vitae. Iusto deleniti iusto. Velit illo quod dolore explicabo assumenda aliquam minima reiciendis magni. Dolorem mollitia possimus debitis ipsum iure aliquid facere saepe laudantium. Neque dolores sed sed enim. Autem suscipit laborum saepe distinctio nulla accusamus sit. Facilis quisquam deleniti. Non vitae sequi esse quae ipsum. Numquam eum officiis repellendus hic vero exercitationem sed. Modi voluptatem aspernatur eligendi neque doloribus. Sapiente cupiditate nisi eum aliquam dicta tenetur totam nemo. Eum temporibus quidem minus dolorem laudantium dicta dignissimos necessitatibus quas.

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