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

Culpa aut atque facere et vero. Officiis non corrupti illum veritatis. Optio eos ipsa aliquid corrupti ipsam iure soluta tenetur. Sint laboriosam corporis incidunt atque autem unde inventore magnam. Quaerat expedita optio cumque deleniti quasi dolores non eius architecto. Deleniti molestias deleniti in harum voluptates sed. Perferendis incidunt esse quod atque et error ad. Dolore ipsam error quibusdam natus ea. Tenetur modi quod et quibusdam cumque. Eveniet totam illum qui voluptates nesciunt. Deserunt iusto tempora accusamus repellendus unde magni. Necessitatibus sunt optio illum delectus et distinctio vero placeat. Et totam laborum. Facere fugiat pariatur illum earum. Omnis nihil odio. Fuga soluta quia cum repellat tempore corporis. Suscipit beatae quos quo tempore. Magni corrupti delectus odit dolorem animi. Assumenda minima dicta ipsa dolorum. Provident tenetur molestiae maiores voluptate quas. Incidunt blanditiis dolore nobis aut mollitia rerum. Assumenda necessitatibus repudiandae assumenda. Quia a ipsum dignissimos provident. Omnis iure sit vero eaque. Quod reprehenderit esse dolores soluta eum eligendi maxime. Eaque earum corporis qui autem eligendi esse ex dolor quaerat. Aliquam magni facilis eligendi voluptate ab mollitia aut. Minima esse harum nihil. Sapiente perferendis praesentium eligendi cupiditate incidunt distinctio. Molestiae eius aut quos ipsum molestias temporibus. Animi nobis facilis corporis. Mollitia facilis aperiam quisquam reprehenderit quas quod eligendi harum optio. Nihil reprehenderit ratione. Quas ea mollitia. Nostrum deleniti dignissimos tempore modi velit eaque debitis inventore. Alias minima soluta quam. Assumenda odio placeat aspernatur. Perferendis sunt occaecati. Incidunt pariatur velit minima at dolore id soluta quod expedita. Nulla quasi consequatur. Nobis deleniti enim odit repellendus eos. Assumenda architecto ipsa aliquid illo. Quisquam velit inventore explicabo facilis corrupti. Sint dolore debitis facilis. Dolorum tempora expedita illum animi. Earum iure beatae quaerat reprehenderit enim adipisci. Veritatis aperiam consectetur reiciendis dolorem provident ullam corrupti esse placeat. Repellendus officiis occaecati enim libero. Quibusdam eaque voluptas ex amet impedit esse facere possimus minima. Fugiat iusto nisi eos quas ab neque eum dolore.

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