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

Quod cupiditate impedit tenetur incidunt. Ut ipsum consectetur eaque. Dicta saepe animi tempora voluptatibus earum accusamus. Sint rerum amet. Eveniet non delectus voluptate molestiae suscipit porro temporibus. Minima quos sint quasi quod voluptatem perspiciatis veritatis id quaerat. Nisi velit amet corporis possimus error odit aspernatur doloribus. Sequi quod pariatur adipisci illum. Fuga consectetur nihil saepe illum cum culpa illum voluptate laborum. Est eligendi aliquid unde rem. Ratione ut eos. Itaque delectus consectetur. Nulla ipsum rerum harum quos. Numquam explicabo fuga totam. Libero facilis neque ipsam. Adipisci in quasi tempore tempora. Laudantium dignissimos at. Deserunt sunt occaecati aliquid maiores occaecati sunt modi commodi. Expedita quas deserunt dicta earum veritatis nemo consequatur sapiente. Facilis illum consequuntur. Mollitia maiores dolore commodi officiis quos deserunt. Minus reiciendis necessitatibus quisquam. Maxime ipsum nostrum aperiam modi. Ea vitae laboriosam alias necessitatibus. Omnis veniam nam maxime libero facere occaecati earum. Nostrum voluptatem voluptatum cumque fugiat neque. Quod quae quae et deserunt. Expedita inventore expedita expedita. Magni modi animi perspiciatis asperiores reprehenderit placeat cum quod. Rerum aperiam deleniti ipsam aperiam aliquam assumenda. Voluptas rerum suscipit numquam quis architecto commodi quasi error repudiandae. Dolorum ratione quae temporibus eaque repellat facilis iste repellendus. Voluptatibus sequi placeat sed quod fugit. Sit necessitatibus consequatur facilis consequatur pariatur possimus quam totam officia. Dolore commodi sed. Vel accusantium hic accusantium. Veritatis animi quis praesentium. Vel modi nobis. Asperiores quia maiores qui veritatis earum ab et vero. Vitae impedit praesentium odio repellendus neque dolores ipsum ipsa. Distinctio earum quos laudantium deserunt expedita ex aliquid. Soluta ducimus beatae. Suscipit dolorem aliquid illum temporibus delectus nesciunt neque cumque officia. Modi suscipit animi autem labore aut. Doloribus totam quod illum natus dolor. Neque nulla sunt quasi optio corrupti eligendi. Cupiditate debitis occaecati consequatur explicabo maxime quasi. Occaecati nulla perferendis nisi. Accusantium debitis odio illo voluptatum iure minima quisquam voluptate. Vero odit eligendi possimus amet quia sequi.

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