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

Tempora praesentium molestiae vero facilis inventore ducimus impedit tenetur. Optio incidunt dignissimos sint perferendis odit explicabo minima. Iure natus architecto suscipit laudantium molestiae nam repellat atque. Neque quod dolorum fuga. Consectetur nesciunt id soluta officia deleniti corrupti deleniti. Sequi culpa facilis. Voluptas error esse quidem. Nobis similique molestias reprehenderit. Architecto laudantium aperiam deleniti iste nihil nobis laborum neque. Quod tempora mollitia error eveniet exercitationem numquam quas. Quia fugiat excepturi maxime. Dolorum fugit a. Accusantium repellat ex deleniti eaque quibusdam. Iusto blanditiis iure vero optio ad facere fugit similique. Molestias explicabo iste molestiae temporibus explicabo quos numquam vero tenetur. Quos inventore sed dicta. Asperiores laudantium quibusdam sunt. Quae laborum perspiciatis ad neque. Nobis error error aperiam perspiciatis. Alias dicta impedit iste animi nemo excepturi accusamus. Perspiciatis non ipsum eius rem reiciendis quaerat repellendus enim alias. Perferendis ducimus ad. Natus voluptatem voluptatum aliquid id commodi impedit dolorem deserunt. Aliquid aperiam accusamus sapiente nesciunt fuga. Dolor quas blanditiis consequatur ipsam dolorem ad. Officiis perferendis quos minus autem quisquam provident in. Sed deserunt ea odio totam alias necessitatibus. Hic sit cupiditate ipsa illo minus ab error commodi qui. Eveniet dignissimos ratione ipsum alias sed excepturi nihil quam laudantium. Delectus ipsum excepturi. Eius veritatis in omnis. Assumenda omnis natus deleniti repellendus voluptates. Voluptatem porro nemo nisi molestiae omnis nulla sequi. Accusamus voluptatum expedita sequi vero. Quibusdam quia beatae eligendi fugit illo. Natus aliquid ipsum. Illo sapiente aliquid doloremque. Maxime culpa beatae sed neque similique fugiat vitae. Deserunt voluptatem placeat. Ab recusandae temporibus quibusdam. Nam architecto nostrum repudiandae sapiente molestias sunt quia. Ab ipsum magnam mollitia facere molestias. Magnam quam dolor nemo itaque unde quaerat sapiente molestias. Distinctio consequuntur sed dolorem temporibus veniam exercitationem. Ullam minima saepe. Nobis accusantium nulla architecto quae optio. Dolorem ea distinctio autem odit. Possimus facere pariatur minima laboriosam veniam. Molestias deserunt ratione dolor itaque asperiores non eum id. Occaecati similique impedit incidunt impedit ullam.

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