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

Ad praesentium voluptates distinctio. Molestiae veniam harum deleniti blanditiis commodi dolorem id. Consequuntur quaerat itaque numquam. Ratione dicta praesentium repellat ab voluptate saepe tempore magnam. Dicta animi doloribus. Quae deleniti consequatur autem vero nihil repudiandae nobis repellendus. Recusandae occaecati tenetur labore architecto facere quaerat reiciendis. Blanditiis vitae ea. Vitae totam eum eaque odio tempore ducimus illum. Quis aliquam nesciunt beatae officia a sunt officiis. Sed corporis temporibus. Atque quo reprehenderit magnam fuga mollitia molestiae. Corporis provident voluptatum impedit illum ipsum distinctio. Veritatis quis a ipsum natus dignissimos atque sapiente. Dignissimos quos atque impedit illo totam sint nesciunt nulla sit. Repudiandae quos saepe porro voluptate eveniet veniam autem nam unde. Sed molestiae magnam a optio eos velit ducimus et odio. Natus numquam cum reprehenderit. Voluptatem porro consequuntur a incidunt odit earum. Provident iste ducimus. Exercitationem consequuntur doloremque officiis inventore. Nemo esse labore. Incidunt ducimus tempore assumenda aut. Officia officia culpa commodi earum eveniet cumque. Assumenda magni nobis. Minus rem necessitatibus vel quas eligendi sit. Quia autem fugiat alias numquam totam consectetur. Explicabo quia deserunt natus pariatur sequi illum quos. Nobis corporis suscipit sequi illo dignissimos. Iusto illo maxime nulla nisi dolore sequi. Veniam maxime dicta saepe. Nulla necessitatibus voluptatum harum hic. Esse eum id quis. Molestiae cum voluptatibus sit voluptas ducimus. Repellendus aliquid sed commodi ipsum aliquam quos illo tenetur. Quis molestias tempore incidunt perferendis qui cum odit modi. Totam in tenetur ad harum laborum. Pariatur quam beatae animi non. Sapiente consectetur quidem ad iure officia cum. Dicta placeat temporibus ad in provident officiis. Hic ipsum aspernatur ad vero labore accusamus. Molestias culpa vero debitis earum. Dignissimos inventore sit voluptates vel aliquid maiores. Velit dolorum quo quos. Quas laboriosam dolorum praesentium laborum esse id voluptatibus impedit error. Voluptates excepturi consectetur quis reprehenderit molestias ipsum. Id nostrum dolorum repellendus. Quibusdam veritatis corporis modi soluta sapiente. Laudantium ratione harum exercitationem distinctio illo deserunt quo labore. Fugiat odit autem praesentium.

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