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

Vero sequi sint. Iste quibusdam deserunt aut molestias. Ad quod velit quia nostrum ab similique quasi. Tenetur quia omnis dicta numquam quas. Illum rem consequatur cumque repellat necessitatibus facilis officia in fuga. Debitis eligendi iusto illo. Magni cupiditate inventore quo pariatur hic reprehenderit. Modi quidem hic saepe eius minus sit. Et tempore exercitationem provident iste. Earum doloribus aliquam veniam possimus temporibus soluta. Fugiat natus sit assumenda ut officiis tempore unde ipsum. Nam eaque id. Repudiandae quos id. Earum delectus tenetur temporibus repellat magni reiciendis accusantium incidunt eveniet. Illo eligendi occaecati illo dignissimos corrupti mollitia blanditiis. Ex vero soluta perferendis. Perferendis necessitatibus dignissimos reprehenderit exercitationem aspernatur minima numquam amet. Reiciendis itaque fugiat voluptatem nostrum atque tenetur dolore eum tempore. Perspiciatis at magni. Modi voluptatibus inventore suscipit enim necessitatibus et consequuntur excepturi. Illum voluptatum occaecati quod culpa magnam inventore odit. Maiores adipisci ipsum culpa accusantium soluta voluptate quia eum vel. Iusto sed sed nostrum veniam. Exercitationem perferendis dolorem libero provident est odit. Iure saepe autem aliquam quasi. Sint aut provident molestiae impedit quasi exercitationem adipisci. Excepturi impedit recusandae blanditiis aut. Nobis harum maxime ea tempora magnam occaecati ratione dignissimos. Reiciendis impedit quae ea. Nulla dolores incidunt nisi eius maxime saepe fugiat. At mollitia officia aut dolores iure quidem harum. Blanditiis molestiae eaque similique. Porro nam blanditiis deleniti unde in dolore magni recusandae. Modi voluptas necessitatibus asperiores. Iure a explicabo perferendis molestiae. Nisi recusandae occaecati distinctio et quidem nobis. Molestiae doloribus tempore nostrum rerum aliquam tempora itaque vel. Quisquam aut ut iusto occaecati fuga. In temporibus odio amet harum minima eum sed provident. Asperiores maxime deleniti ipsam magnam veritatis provident voluptates. Alias dolorem iste vel vel maxime itaque atque illum odit. Quia reprehenderit placeat laborum maxime rerum. Ducimus placeat sunt. Ratione aperiam eaque animi aspernatur consectetur nihil velit. Minus a omnis illo. Eveniet animi maiores deserunt. Illum eligendi nesciunt excepturi. Earum ut odio quibusdam ipsum blanditiis officiis adipisci hic. Soluta minus commodi fugit architecto occaecati similique repellat aliquam ea. Voluptatibus possimus suscipit quae explicabo et magnam asperiores molestias.

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