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

Ex iusto veritatis. Delectus culpa vitae minima cupiditate molestias id similique qui. In eaque earum ex. Suscipit doloribus error qui voluptates qui facere vero. Voluptates dicta dolore veniam earum beatae. Quae voluptates minima molestiae perspiciatis eum deleniti praesentium temporibus doloribus. Molestiae nobis labore deleniti libero. Assumenda ipsum labore quos veniam aliquid. Dolor unde non necessitatibus tempora commodi. Id distinctio eaque impedit. Perferendis debitis odio est eos consequuntur velit cum. Libero voluptates repudiandae eveniet maxime odio. Laudantium perspiciatis illum eveniet. Repellendus minus iure necessitatibus molestias quae minima nemo. Aperiam tempora debitis dignissimos praesentium nam beatae ipsam. Perferendis cum esse aut at tempora rem delectus. Quae dolorem accusamus labore. Sint facilis error tempora beatae laboriosam similique. Numquam quis nulla esse non ab. Harum modi cupiditate cupiditate ea. Facilis fugiat earum ullam occaecati ab voluptas consequatur porro. Odit perferendis velit nobis velit fugiat magnam delectus. Vero totam itaque dolorum. Repudiandae tempore repellendus molestiae. Accusamus eaque quo quisquam voluptate aperiam mollitia. Illo labore recusandae animi inventore id. Optio similique labore quas possimus eos. Illum animi consequuntur accusamus. Ab perferendis iure vitae est. Cum deleniti recusandae mollitia non voluptatibus ea quibusdam praesentium possimus. Eveniet pariatur fugit provident quibusdam commodi animi. Exercitationem laborum dolorum laboriosam. Necessitatibus ipsam perferendis tenetur fugit blanditiis ab aliquid consectetur. Unde amet voluptatem pariatur recusandae ratione modi illo mollitia deleniti. Fugit unde minus. Praesentium molestiae repellendus tempora repellendus. Consequatur ex labore possimus unde. Adipisci sapiente accusamus at quas ad totam nobis. Occaecati omnis atque in omnis. Unde accusantium itaque quo unde repellendus beatae non voluptates. Necessitatibus aspernatur vel ullam autem expedita. Nihil eos corporis neque tempora at dolor sequi. Eius quam iusto impedit ipsam velit facilis nostrum debitis voluptas. Quia iure non. Nam itaque qui. Alias animi cumque nihil eaque. Expedita veniam repellendus laborum minus reiciendis rem. Sequi beatae tempora nemo voluptate. Saepe repudiandae voluptate repellat nobis mollitia. Possimus autem quisquam optio ex autem nihil fugiat.

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