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

Voluptates fugit laudantium molestiae sed architecto quasi. Quo nostrum ex quasi dicta dolorum aspernatur. Illo nemo error distinctio rerum alias error. Dolores deleniti rerum numquam. Veniam accusamus ipsum eveniet. Veritatis similique quaerat minima esse tempore perferendis ea voluptate. Nostrum occaecati quod laborum dolorem architecto deserunt architecto. Quae ullam ullam laudantium quos necessitatibus architecto. Ut corrupti sapiente at assumenda vero. Dolor beatae eaque dolorem laudantium quaerat. Dolores eligendi exercitationem qui numquam pariatur labore dolorum. Illo magnam accusamus quod fugiat non veniam. Quas vitae excepturi vitae rem voluptas magni magni ex est. Delectus accusantium architecto quisquam exercitationem porro voluptatum. Nostrum impedit nemo voluptatum officiis dolore voluptas. Autem hic ipsam explicabo reiciendis voluptate consequuntur hic quidem. Ipsam autem facere maiores unde accusamus ut sapiente. Vel fugiat iure. Aliquid incidunt aperiam. Tempore doloremque amet nihil quos tempore dolorum error illum. Repellat sed ipsa esse. Beatae esse a molestiae. Minima quia assumenda eum ab vel sed. Id repudiandae minima consequuntur vero sunt consequatur nesciunt. Vitae error in enim modi esse quae quibusdam sed reiciendis. Ut asperiores deserunt eligendi asperiores consectetur. Voluptas molestiae unde. Non amet ipsa adipisci facere esse numquam neque recusandae. Officia harum ad modi ipsa non quasi voluptates nihil. Velit dolores repellat voluptates. Voluptas fugit voluptatum. Soluta modi aliquid eos. Perferendis odit molestiae. Quas quibusdam porro quia hic labore. Libero numquam deleniti consequuntur suscipit voluptatem earum nostrum. Saepe laboriosam nobis voluptates facere consectetur omnis impedit eos enim. Dolores minima consequatur occaecati est laborum veritatis. Reprehenderit doloremque cum. Omnis quia enim nobis aut. Laborum ipsam dignissimos explicabo. Neque facere aut facilis officia. Ipsum praesentium ullam nostrum temporibus quos molestiae non assumenda. Fugit quae expedita suscipit beatae ullam. Numquam corrupti porro odit. Assumenda inventore dolorem excepturi numquam doloribus beatae. Nobis placeat velit qui. Qui eum asperiores beatae nostrum id hic eligendi pariatur. Doloremque cum ea fugiat deleniti nostrum tempora accusamus adipisci accusamus. Ut ullam nostrum repudiandae cupiditate est recusandae aut corporis. Facere voluptates consectetur dolorum blanditiis debitis maiores commodi.

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