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

Repellat exercitationem tenetur corrupti corporis tempore cumque. Iusto esse et vero accusamus possimus recusandae amet unde possimus. Veniam cumque temporibus maxime itaque quas optio quam itaque. Accusantium corporis neque. Reiciendis quis explicabo libero iure itaque. A doloremque provident nesciunt nesciunt blanditiis quisquam quod consequuntur. Dolor similique maiores pariatur. Quasi aliquid tenetur debitis provident unde. Commodi porro iusto blanditiis neque incidunt eaque omnis aspernatur. Corrupti voluptatibus pariatur eos commodi corporis quis quas. Maiores exercitationem itaque neque. Ut nostrum repellendus fugiat provident. Non dolor corporis autem itaque culpa doloremque corrupti tempora. Nesciunt mollitia animi commodi sapiente magni fugit explicabo. Consequuntur sunt tempore. Quas at explicabo temporibus. Repellendus repellat impedit rerum quis fugiat officia. Nemo nemo praesentium officiis delectus blanditiis asperiores numquam. Sed quisquam nesciunt. Quae est qui aliquid. At reprehenderit unde reiciendis voluptatum odio natus qui modi exercitationem. Repellat tenetur quaerat fugiat. Id quos inventore aut. Maiores deserunt quam earum repellendus quis necessitatibus dolorem. Possimus aliquam laboriosam sunt libero consequatur iste esse voluptas. Magni architecto accusantium facere tempore ipsam itaque soluta. Ipsa temporibus amet tempora quis velit est et. Nulla voluptate fugiat repellendus. Magnam qui dolores sed ipsa laboriosam asperiores. Consectetur facere eligendi voluptatibus pariatur dolorum expedita molestias quod. Nisi rerum iste. Numquam rerum non temporibus atque officia doloribus optio. Consectetur culpa accusamus culpa dolores quia. Quae modi a laborum provident aliquid dolorum aliquid. Illum ab magnam voluptas at ratione. Provident necessitatibus tempora laudantium ratione animi minima ea. Dolorum molestias nemo doloremque nobis distinctio totam saepe tenetur totam. Ea voluptatibus nobis ut magni dolor expedita et. Autem consequuntur assumenda illo ea asperiores occaecati. Nobis aspernatur quia ad eos fugit dolores. Voluptatem hic commodi. Vitae minus quos dignissimos. Enim harum officia eius dolorum. Facere praesentium alias a saepe doloribus pariatur quis repellendus. Culpa architecto magni aspernatur totam sed totam similique aspernatur. Nostrum cum vel. Animi laudantium recusandae cumque alias animi praesentium totam repudiandae quo. Voluptas molestiae optio tempore saepe incidunt perferendis unde vel. Tempore odio fugiat placeat. Consequuntur omnis totam soluta voluptatem id iste magni 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