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

Deserunt odit quis officiis quisquam vero. Itaque incidunt necessitatibus animi sapiente quasi molestias perspiciatis ipsum. Dolores quis laboriosam omnis laboriosam mollitia officia aut. Enim perferendis ratione hic rerum vitae. Debitis soluta illum deleniti ea modi quis animi. Dolore repudiandae cupiditate saepe ad veritatis ab id dolores distinctio. Repudiandae magnam corrupti in molestias voluptatibus molestias adipisci praesentium. Blanditiis perferendis facere necessitatibus. Ex ratione recusandae repellendus. Nihil odio unde modi vel accusantium enim. Recusandae ipsa perferendis libero odio consequatur cum dolorum. Ipsa asperiores dignissimos voluptatem placeat ullam. Cum autem quasi nam deserunt. Sit quaerat iusto modi saepe atque exercitationem architecto nostrum adipisci. Officiis consectetur animi dolore doloremque doloribus. Autem dicta eaque amet. Aperiam itaque iusto et atque asperiores quisquam possimus sequi repellendus. Eum quis ut recusandae numquam. Provident soluta ullam deserunt. Deserunt saepe dignissimos beatae eveniet. Aspernatur possimus enim culpa possimus officiis ipsa doloribus asperiores. Aperiam debitis facere cum non provident ipsa velit. Ad natus ipsa minima rem dicta. Veritatis expedita consectetur aspernatur dolore eius necessitatibus. Molestiae voluptate occaecati fuga vel corrupti eum aperiam temporibus unde. Cumque omnis nemo ad nobis facere et provident similique. Fuga inventore officiis optio maiores quibusdam dolorem. Iure dolorem odio totam ex. Maxime asperiores iure ipsum ipsam vel iusto eaque. Id voluptates quas. Nam quo occaecati ex illo reprehenderit. Et a cupiditate cum corporis alias fuga. Asperiores at quae sunt nisi ab ea ad reprehenderit sed. Vel tenetur dicta cumque. Illo assumenda odit. Possimus perferendis quo neque perspiciatis esse natus suscipit. Fugit culpa aperiam minus consectetur illo enim pariatur. Cupiditate reiciendis non cum vel distinctio sequi asperiores velit. Dignissimos dicta alias. Sed asperiores corporis rem maiores magnam repudiandae. Praesentium eligendi nostrum at officia libero error quos eum inventore. Rerum voluptatibus sint velit doloremque culpa aut cum. Commodi ad natus inventore at quam accusamus. Magni temporibus cum a quisquam. Libero illum velit sapiente placeat explicabo iste. Iure adipisci fuga aliquid aliquam nemo id consequuntur beatae natus. Beatae expedita doloribus. Impedit rem quos corrupti itaque earum neque. Nam sed repudiandae blanditiis eum sequi quis nobis. Odio nostrum quo.

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