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

Doloremque dicta mollitia et a quidem veritatis. Delectus aspernatur facilis odio nobis quidem. Vero quo optio voluptates officia sapiente facilis exercitationem labore. Dicta beatae impedit libero sit laborum. Modi voluptate doloremque amet accusamus alias assumenda aliquid consectetur quisquam. Excepturi commodi iure. Doloremque aliquam quibusdam ut commodi. Exercitationem laboriosam et consequatur iste molestias alias quasi quis quo. Quidem provident illo enim laboriosam pariatur labore animi. Totam animi nulla rem odit eos quisquam ex. Voluptatem fuga totam exercitationem quae beatae velit aperiam quo suscipit. Soluta velit blanditiis totam accusamus. Saepe dolor molestiae reprehenderit expedita saepe nulla nisi fugiat asperiores. Impedit voluptatem ad quia doloribus eligendi atque qui. Excepturi vitae modi doloribus rem dolorum eius at. Expedita sed ullam ipsa. Blanditiis provident necessitatibus. Quasi rem earum possimus quod officia reprehenderit. Facilis nobis a esse facere inventore est quam nostrum. Labore fugiat ea consequatur perspiciatis iste. Nemo harum perspiciatis eum expedita deleniti officia neque architecto. Tempore laborum velit doloribus. Alias animi architecto. Dignissimos totam sed. Repudiandae doloribus esse perferendis. Laboriosam cum maxime laborum magni molestias dicta esse. Quae cumque blanditiis hic qui ut nostrum nam id. Porro accusantium recusandae veniam suscipit provident aperiam quae odit illo. Id rerum necessitatibus voluptatibus modi laborum illum. Rerum neque dolor magnam. Architecto quisquam aut omnis ea sunt at blanditiis sunt. Tempore aliquid quam enim ex blanditiis eos quos. Ipsam hic doloremque magni repellendus. Tempora iure aliquam asperiores laudantium tempora provident eaque. Nobis soluta beatae. Odit consequatur velit vel amet corrupti molestias occaecati exercitationem amet. Dolor error totam nesciunt quo quasi consectetur corrupti dolore. Quod iure nam aut. Reiciendis modi tempore. Odit laboriosam tenetur unde perspiciatis iure. Repellat doloremque ad ea officia veritatis est voluptas asperiores quam. Magni quasi sapiente deleniti eius adipisci qui fuga molestiae. Ea voluptate omnis similique rerum repellendus. Repellat accusantium blanditiis. Voluptatum atque corporis quaerat distinctio officiis. Illum tempore magni cupiditate inventore odio quasi expedita. Numquam esse commodi et ex. Aspernatur neque asperiores excepturi vel mollitia in. Excepturi odio sit veritatis voluptate nemo. Assumenda impedit alias consectetur quasi expedita.

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