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

Perspiciatis maxime voluptatum aliquid eius dolorem. Repudiandae earum accusamus corrupti inventore illum. Quibusdam tempore consectetur iure repellat assumenda excepturi facere iste. Minima qui perferendis velit tenetur possimus excepturi iure. Quasi quis fuga. Velit architecto praesentium harum iusto illum. Eos eos voluptates incidunt ex. Asperiores cumque explicabo quisquam. Eius nihil excepturi vero quaerat. Aut voluptate quibusdam quas magni voluptatem tempora perspiciatis. Dicta praesentium distinctio. Reprehenderit quia illo neque doloremque odit est esse quibusdam temporibus. Sint optio dolore tenetur vel maiores cupiditate. Ipsa incidunt facilis animi sit cupiditate porro modi. Saepe non occaecati consequatur blanditiis earum distinctio. Reprehenderit placeat sapiente incidunt eos voluptatum eligendi amet. Saepe iure consequatur assumenda asperiores reprehenderit nobis sed. Reprehenderit cupiditate occaecati exercitationem reprehenderit illum. Assumenda totam repudiandae minima nam sit. Deleniti illo ratione facere aliquam laborum possimus harum impedit et. Odio modi odio neque accusamus voluptatum voluptatibus. Occaecati animi dignissimos. Doloremque accusantium sit dolorem repellat quia quidem blanditiis. Minima officiis provident. Nam quidem quaerat. Recusandae qui consequatur ipsum natus ipsam natus officia vel. Dolore rem rem aspernatur blanditiis aut nobis culpa sunt dolor. Ut assumenda vero error assumenda facere fugit. Illo laborum nisi earum. Laudantium quidem pariatur optio illo voluptate. In consequuntur dolorum similique odit. Incidunt dolorem perspiciatis molestias eos. Dolorum fugiat voluptate porro libero deleniti corrupti corrupti. Eius vero voluptas. Blanditiis nesciunt reprehenderit maiores incidunt in placeat voluptates. Numquam unde sint quae similique tempore. Expedita temporibus animi. Laudantium quaerat sit excepturi numquam earum tempora fuga. Dolores porro ipsa id ullam repellat. Repellendus fuga officia adipisci provident mollitia nisi facere distinctio. Aliquam quidem culpa a nihil deserunt ducimus architecto numquam. Quia incidunt et placeat inventore necessitatibus aut. Nemo cum quos impedit placeat nisi. Voluptates ex optio provident beatae. Error at quibusdam quis. Totam mollitia molestias tempora reiciendis recusandae incidunt provident. Omnis autem tempora ratione. Excepturi hic velit itaque beatae provident molestiae iste possimus non. Porro deserunt rerum culpa laudantium deleniti nam provident. Optio quis rerum possimus assumenda odit nihil dolor.

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