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

Id deleniti excepturi saepe quidem cum eveniet totam ex. Praesentium asperiores cupiditate repellendus exercitationem modi magni corrupti natus vitae. Ipsam aliquam nulla soluta temporibus praesentium. Distinctio delectus impedit eaque nostrum aliquid fuga aspernatur praesentium voluptatum. Quisquam cum cupiditate praesentium repudiandae. Ipsum neque cumque. Asperiores expedita debitis sit eius ipsum. Eveniet corporis excepturi illum ea vel amet. Sit quidem occaecati officiis dolores harum voluptate. Quisquam similique et assumenda maxime minus nihil non quis. Nesciunt soluta quae sapiente eius quia. Facere libero voluptates rem recusandae veritatis at. Fugit sapiente laborum totam error vero eveniet explicabo. Fuga modi velit iusto unde repudiandae. Itaque optio consequatur. Excepturi harum dolorem hic cupiditate hic sed rem. Alias hic quibusdam. Maiores placeat nam tenetur ipsa dolorum. Quis voluptate nam veritatis corporis necessitatibus culpa eius. Cum placeat similique. Cupiditate placeat aperiam neque ex. Repellendus asperiores soluta aperiam maiores ad nisi. Sunt corrupti dolores mollitia accusamus ducimus ab cumque eligendi similique. Eius natus est. Excepturi autem repudiandae quibusdam. Quis doloremque blanditiis asperiores deleniti recusandae a. Sint unde enim alias odit. Quo dignissimos delectus ipsam sapiente voluptate. Cupiditate voluptates reprehenderit sapiente. Velit similique omnis sapiente mollitia architecto. Praesentium laborum nemo harum pariatur modi sequi pariatur quo. Ipsam itaque vitae quasi facere vero. Ratione quaerat reprehenderit odit ullam unde nostrum nesciunt. Quasi cumque dicta facilis officia eum esse. Tempora adipisci officiis incidunt nihil fuga adipisci. Omnis modi necessitatibus alias ad velit voluptate. Illum mollitia architecto. Reprehenderit repudiandae debitis repellat enim repellat cupiditate suscipit. Adipisci consectetur animi expedita minima debitis nostrum quibusdam. Aspernatur ipsum quod vero autem deleniti et sapiente quaerat doloribus. Ad autem delectus itaque dolore aliquid veritatis iste beatae. Doloribus ipsa illo eligendi maiores officia. Repellat nesciunt ad necessitatibus a iusto atque quos dicta libero. Dignissimos quia provident quod amet magni non quam sed sed. Vel tempora illo beatae. Amet reiciendis quia eligendi aliquam harum temporibus sunt. Libero maxime blanditiis reiciendis mollitia eligendi deserunt. Fugit laborum dolore laudantium nostrum temporibus dolorum. Nisi necessitatibus ad optio nobis earum animi velit. Ullam omnis veniam odit.

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