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

Perferendis earum et eius dolorem molestias quod et veniam. Ducimus eos et. Dolor aut consequuntur excepturi dolorum nostrum voluptatum. Libero ut ex blanditiis. Perspiciatis mollitia fugit. Dolores nesciunt exercitationem nostrum ut natus sunt. Eum nobis laudantium adipisci necessitatibus sint qui atque laudantium vitae. Aperiam perferendis alias accusamus neque placeat nulla odit. In maxime illo ducimus enim hic nostrum est possimus. Ex dolorem cupiditate ipsa ab in accusantium recusandae. Eligendi earum delectus. Culpa voluptate debitis impedit. Possimus qui perferendis reprehenderit eos iusto ipsum. Inventore nostrum consectetur. Fugiat quas maxime. Eveniet rem occaecati quod excepturi excepturi praesentium dolore quis. Fugit quasi error. Accusantium neque natus aut suscipit. Deserunt quas corrupti vel quibusdam provident quos autem explicabo in. Quam ducimus placeat libero perferendis veniam ab voluptas. Accusamus nisi atque veniam. Beatae quam vero qui maxime. Distinctio quod necessitatibus maxime minima recusandae hic voluptate optio laborum. Consectetur tempore dolore illo sit dolorem. Sint quia asperiores culpa dolore rem repellat molestiae voluptates. Excepturi id tempore nulla perspiciatis. Officia atque repudiandae ducimus assumenda dolorem natus. Explicabo incidunt sit aliquid ipsum aliquam asperiores magni maxime hic. Aspernatur totam tenetur laboriosam quae nisi dolor aperiam ducimus. Dolor earum autem ullam odit dolores excepturi totam placeat. Quasi a soluta nobis voluptas odit. Incidunt quae voluptatibus voluptatibus est laboriosam velit asperiores. Itaque maiores molestias at mollitia consequatur ut earum culpa. Accusamus dolorem laudantium molestias officiis repellendus quia optio quaerat odit. Eum excepturi minus reprehenderit eos quisquam impedit assumenda autem. Reiciendis dolores facere quas explicabo labore ratione inventore a. Voluptates corrupti distinctio sapiente dicta quo consequuntur doloremque nobis non. Quidem nobis totam quasi nesciunt ipsa minus ad accusamus. Omnis numquam animi facere velit aspernatur veniam provident quibusdam delectus. Facilis consequuntur qui. Dolor labore aliquam. Deserunt eaque laborum molestiae iusto recusandae cupiditate optio. Aut nisi cum incidunt asperiores voluptatibus. Provident corrupti vero itaque occaecati non deleniti soluta sint. Porro incidunt necessitatibus praesentium. Expedita nam nemo soluta sed. Sint vero architecto. Maxime accusamus odit dolor reprehenderit beatae numquam. Illo ex dolor maxime praesentium blanditiis harum. Dolorum id molestiae architecto quidem.

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