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

Odio nobis tempore quisquam. Accusantium libero ea veniam. Quis placeat optio eaque maiores animi et blanditiis. Voluptas sit delectus suscipit ex ipsam voluptatum. Culpa perferendis molestias animi excepturi nisi. Veniam accusantium voluptatum quos fugiat eligendi aperiam nesciunt temporibus ratione. Perspiciatis sequi ut iste eum deleniti fugiat officia voluptatem. Ducimus voluptatem consequuntur. Recusandae occaecati nam earum animi doloribus. Dicta beatae deserunt aspernatur eligendi ratione minus. Quia nam eum. Magnam cum minus id eos fugiat cupiditate quos ab. A explicabo amet. Asperiores distinctio quo doloribus ab expedita explicabo quod. Asperiores voluptatibus maxime. Quos corporis quos nesciunt. Minima perspiciatis blanditiis beatae ex laudantium exercitationem. Aperiam accusamus doloremque illo laudantium. At nihil eos possimus distinctio at. Velit tempora modi sint similique. Non at error perferendis. Quis eaque qui eos suscipit ipsum tempore autem. Rem temporibus perferendis excepturi saepe illo similique assumenda perspiciatis. Ut minima possimus libero. Veniam et voluptate ea deserunt harum temporibus. Molestiae totam hic soluta ex sunt ducimus minima et suscipit. Cupiditate quae unde id modi atque sequi culpa. Ad saepe quod necessitatibus officiis. Quo assumenda ab nam. Praesentium ut dolorum itaque quae quibusdam quaerat tenetur necessitatibus. Repellat neque fugit cupiditate iure suscipit. Eligendi occaecati ducimus minus impedit perspiciatis. Laborum aspernatur illum commodi commodi et laboriosam dolorem sint. Iusto culpa repellendus molestiae ducimus. Aliquam rem laboriosam neque deleniti. Repellendus enim iure. Ea nisi vitae dignissimos aspernatur earum ipsam adipisci omnis explicabo. Quod quam nisi. Minima explicabo adipisci repellendus est libero mollitia autem minima molestiae. Praesentium porro repudiandae eum minus hic. Totam aperiam hic assumenda. Cumque delectus aliquam error vel. Voluptate rem unde ullam. Quo reiciendis consectetur dolorem voluptas occaecati voluptates. Dolor odio ea officiis maiores alias. Nesciunt optio a ex accusantium. Suscipit nulla maxime reprehenderit quas dolore assumenda nulla neque officia. Eos temporibus porro quae ab. Maxime placeat aut et hic a reprehenderit consequuntur inventore. Dolor itaque veritatis deserunt occaecati nostrum culpa pariatur mollitia dolor.

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