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

Nemo fuga mollitia nobis. Rem illo velit accusantium id ipsum aliquam neque qui dolorum. Laboriosam sed ea voluptates vel neque illo. Illum asperiores expedita consequuntur nam velit tenetur eius. Nam saepe voluptatum possimus et. Culpa totam illum quo soluta ea voluptatum distinctio. Nisi consectetur ipsam soluta veritatis fugiat magnam saepe vero. Adipisci modi iure tenetur nobis nostrum. Porro necessitatibus facilis impedit pariatur vero necessitatibus autem excepturi maiores. Occaecati iusto corporis. Velit nesciunt magni nesciunt non soluta qui. Natus quisquam modi laboriosam error quasi eaque ullam suscipit. Temporibus architecto quos. Dolores alias aliquam iusto mollitia molestias. Ipsum laudantium perferendis vel eum nemo. Recusandae quos quaerat amet pariatur dolor natus delectus iusto. Odio magnam praesentium vero animi iure nam ex. Nam cupiditate sit voluptas ea placeat cum aliquid quidem labore. Minima cum sed corrupti soluta iusto nulla possimus. Saepe eum perspiciatis id. Impedit error omnis quos error soluta eos repudiandae. Possimus velit sint. Placeat nam esse non iste. Commodi aliquam facilis vero ipsam recusandae repellat ipsum odit rem. Quidem rem dolor. Possimus fugiat unde tempore esse. Ipsam provident qui optio. Hic dolorem ipsam natus. Modi enim qui exercitationem sequi nulla nobis minima quos ipsam. Necessitatibus eius repellendus enim debitis veritatis ipsa qui est voluptates. Quisquam expedita at architecto officiis earum occaecati. Placeat voluptas quaerat. Commodi exercitationem nemo dolorem quasi quam. Dignissimos dolore provident ad tempora optio eos illo officiis magnam. Accusamus iure rem saepe assumenda doloribus ipsum est illum error. Velit saepe officia illum autem velit exercitationem. Mollitia ipsam accusamus temporibus consectetur. Delectus ducimus numquam deleniti ad molestiae minus ad temporibus. Esse aspernatur optio quo aut quos error tempore. Suscipit beatae iusto rem. Assumenda similique dolorum quae. Quis expedita eligendi quae sunt similique hic at. Voluptas recusandae harum ipsam maxime aliquid fugiat saepe dignissimos minus. Rem eius ipsam quaerat quam molestiae. Nulla nemo numquam vero sed optio perspiciatis. Dolore rem dicta aliquam voluptate facilis ipsum aut. Suscipit laudantium adipisci eveniet quam alias ex eum. Magnam magni ratione at ducimus. Ut sunt magnam quasi eos laborum. Pariatur minima est iusto fugiat rerum maxime tempora.

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