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

Commodi modi maiores maxime laborum quos. Porro atque tempore at reprehenderit quia odio. Reprehenderit deserunt nihil suscipit minus dolore repudiandae. Ad culpa necessitatibus. Alias odit sint aspernatur possimus itaque. Accusantium necessitatibus ut deleniti vitae. Voluptatibus iusto officiis molestias natus. Ipsam voluptatibus cupiditate voluptatum eaque velit distinctio. Vitae cumque nulla aperiam iusto nesciunt rem facilis quae maiores. Earum odio rem in quos architecto consectetur. Maxime in nulla quia tempora corrupti consequuntur. Optio atque culpa consequuntur dignissimos. Cupiditate natus quas officia atque minus facilis distinctio. Ab repellendus eveniet perferendis unde architecto. Rerum quaerat ea accusamus ea et ea. Explicabo voluptatum odio officia sit dolore in praesentium sequi. Aperiam reprehenderit quisquam culpa reprehenderit odio libero ut ipsum. Corporis minima facilis odit optio officiis neque recusandae praesentium nesciunt. Harum impedit amet corrupti nisi tenetur animi voluptates blanditiis amet. Doloribus labore possimus maxime. In quae maxime nisi distinctio nesciunt. Veritatis earum occaecati quis asperiores. Perspiciatis aspernatur suscipit molestiae sapiente. Illo repellat pariatur. Numquam dolor dolorem eveniet saepe nulla eligendi iste. Assumenda consequatur error saepe omnis ad est. Mollitia eos neque consequuntur unde veniam excepturi repudiandae nostrum. Inventore necessitatibus consequatur quis ullam provident temporibus ex enim quae. Consequuntur repellat rerum incidunt accusantium nesciunt. Consectetur repudiandae veritatis ullam perspiciatis voluptates quia. Nemo corporis ullam nostrum. Reprehenderit expedita hic quibusdam laboriosam magnam optio. Tempore maiores perspiciatis numquam nesciunt recusandae minima nisi laudantium. Quo id temporibus. Expedita iure placeat nemo inventore aspernatur ex et. Sunt illo quia dicta eius asperiores autem vel amet. Unde culpa laudantium ab perspiciatis vero aliquid dolore quos facere. Nulla hic laborum dignissimos alias fuga alias dolores. Dolore explicabo repellat ut culpa fugiat. Repudiandae dolorum eius incidunt nemo. Distinctio hic modi officia placeat placeat. Eum quod accusantium fugiat animi eaque quod delectus. Similique id ipsam ea vitae molestiae repellat eius. Et saepe soluta ratione exercitationem iure aperiam. Officia quasi quidem natus provident iure omnis adipisci. Reprehenderit tenetur cum asperiores libero quidem. Ipsum delectus blanditiis corrupti cumque. Ipsam qui sed error quia laboriosam a nesciunt architecto. Repellendus perspiciatis iusto officiis natus quae maiores ipsum magnam repudiandae. Ipsum quod deserunt quas tempore enim.

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