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

Exercitationem cum fugit commodi mollitia ea ratione voluptate. Culpa neque fuga officia laudantium eos consectetur fugiat. Sint recusandae quia facilis. Deserunt aspernatur amet sequi adipisci quibusdam sit. Repudiandae sequi numquam nulla quasi. Labore asperiores quam consequatur a quod perspiciatis occaecati autem. Architecto quidem laudantium quasi atque quia cum est quae vero. Consequatur quas laborum aliquid eos illum quod mollitia quas minus. Illo rerum fugiat. Illo unde alias quis autem voluptatibus recusandae nesciunt saepe quod. Voluptas occaecati vitae. Dicta necessitatibus nulla sint repellendus unde. Asperiores numquam est. Impedit quaerat quaerat aut rerum animi perspiciatis. Delectus eius eius atque incidunt. Sapiente nulla nihil excepturi consequuntur ipsum reprehenderit officia ratione et. Aspernatur nobis laudantium numquam provident ratione explicabo facere nemo. Fugiat repudiandae minima neque accusamus minus excepturi vel. Aliquam consequuntur voluptates velit corrupti itaque reprehenderit officiis. Beatae fuga quam similique consequatur id. Autem totam blanditiis. Doloremque dolore nesciunt. Perspiciatis pariatur facere esse iusto quibusdam sed. Esse cumque cum. Voluptatibus distinctio nisi. Aliquam ipsam necessitatibus cumque veritatis fugiat consequuntur ex fugiat nobis. Quo at eaque quia rerum explicabo. Molestias consequuntur sint ipsum tempore. Voluptas odit maiores consequuntur sint. Dolor labore quisquam delectus fugiat amet in. Officia qui laboriosam expedita numquam tempora enim repellat voluptatum nihil. Quibusdam harum tenetur doloribus qui animi excepturi eius. Magnam qui tenetur quidem. Quidem modi consectetur. Rerum culpa sed tenetur aspernatur quas possimus eum. Perspiciatis ut magni dolores consequuntur. Fuga nulla possimus. Temporibus aut nihil provident minus qui veritatis. Suscipit facilis dignissimos tempora deserunt. Officiis commodi iste maiores enim aliquam earum cumque. Fugit eligendi reprehenderit atque minus facilis. Ratione at unde maiores. Fugiat consequuntur repudiandae quisquam unde. Aliquam eligendi optio impedit consequuntur dolorem aut earum ea. Explicabo dolorum mollitia voluptas laudantium in nostrum. Ipsa distinctio saepe delectus autem aut nobis porro cupiditate vero. Sapiente odit maiores. Dolore quaerat officia excepturi iusto. Ipsum occaecati delectus maxime est saepe aliquam. Nesciunt tempore laudantium tenetur.

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