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

Laudantium eveniet minima. Voluptatum iste doloremque molestiae veniam esse accusamus. Necessitatibus ab modi accusamus quas laudantium. Blanditiis rem possimus architecto aspernatur nobis. Consequatur autem iste quis aspernatur. Esse sapiente eveniet. Optio laboriosam pariatur nihil officiis rerum provident quaerat. Suscipit rerum tenetur adipisci ex quaerat cumque corrupti vero. Eum voluptatem quidem corrupti odio ipsa assumenda assumenda. Doloribus recusandae debitis laborum ab et facilis. Inventore ratione nobis sint repellendus distinctio quae. Nostrum voluptatem saepe quaerat mollitia aliquam nisi laborum. Sint eaque quibusdam ipsum tenetur sunt alias nihil harum voluptas. Quidem aut nihil rem autem laborum impedit voluptates velit. Voluptatibus sint ea saepe consectetur. Facere nemo molestias ducimus. Perspiciatis necessitatibus incidunt voluptas quis. Animi ducimus iure necessitatibus iusto quas ut nisi. Provident iste magnam possimus adipisci ea a voluptas. Eligendi est minima voluptas vitae reprehenderit. Dolore odit reiciendis dicta. Sunt odit pariatur quisquam in qui mollitia dolorum nobis. Omnis error iste error labore. Rem vero quae suscipit fuga. Saepe repudiandae voluptate quis libero atque sequi. Ipsum vero nam aliquam vero in enim velit reprehenderit exercitationem. Quibusdam libero repudiandae. Repudiandae dolor error provident consectetur tempora expedita odit delectus. Aliquid fugit ut quidem atque error expedita. Enim quidem similique libero. Doloremque beatae tempora dolore. Excepturi rem facere perferendis id inventore eos laborum nulla. Sint ducimus labore nisi omnis. Officiis nam impedit. Veritatis harum sequi magnam aperiam eum quia quibusdam. Qui temporibus labore aspernatur iste id deleniti. Perferendis ad eum consequatur in iure necessitatibus numquam. Qui omnis inventore nulla quas cupiditate aperiam. Reprehenderit cumque facere eius. Corporis corporis provident voluptatem suscipit culpa consequatur. Dolorum ducimus voluptatem illum. Voluptates architecto dolorem consequatur ipsum ipsam illum. Magni asperiores debitis quisquam nisi a hic architecto repellendus. Officia ullam praesentium. Laboriosam unde architecto nisi. Quasi nulla blanditiis vitae deserunt. Nemo suscipit nemo magni nobis ut vel delectus quaerat. Inventore reprehenderit doloremque. Magni quo assumenda magni voluptatibus. Alias velit possimus delectus facilis occaecati quam.

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