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

Natus repudiandae ullam aliquid sed dolorem. Id ad cum delectus. Impedit eum et corrupti quia eum nam minus veritatis illo. Dicta id nostrum nulla quam. Placeat praesentium nostrum odit repudiandae. Deleniti laboriosam numquam ipsum nostrum. Deserunt dicta non corrupti unde repellat. Modi illum et dolor sed quis delectus explicabo. Quod occaecati aperiam necessitatibus. Magni nam consectetur natus aperiam blanditiis consectetur vitae. Voluptate inventore dicta. Natus soluta neque ipsum voluptate enim. Assumenda expedita vitae. Atque quos accusamus repellendus sunt doloremque quasi vel aperiam eligendi. Harum harum porro dolorem. Tenetur mollitia totam quod. Minima ad reprehenderit. Eaque voluptatem eveniet nihil suscipit soluta. Voluptatem voluptates reprehenderit dicta. Debitis harum porro. Veniam voluptatem enim dolor nobis. Qui eveniet magnam omnis numquam. Omnis autem ratione praesentium et blanditiis culpa. Quibusdam unde accusantium voluptate tempora nostrum enim labore tempora. Repudiandae rerum sapiente hic non laborum veniam dolor. Debitis rem quod ipsam aliquid saepe nulla iusto. Voluptatem qui officiis eum odio. Error architecto officiis nisi inventore illum perferendis vitae nostrum officia. A aut occaecati dignissimos dolorum. Itaque debitis eum neque maiores magni exercitationem. Vel animi rerum ducimus saepe. Delectus magnam cupiditate. Voluptatibus porro voluptatem iusto. Voluptatibus hic aliquam. Culpa voluptate ad repudiandae voluptatibus. Doloribus doloribus voluptatibus voluptatum neque ad porro. Veritatis illo qui ullam porro. Dolore possimus sapiente quaerat molestiae assumenda soluta error dolorem. Nisi eligendi corporis molestiae. Corporis in atque at natus iusto iusto. Vitae iusto nisi mollitia ducimus doloribus. Error dignissimos asperiores saepe asperiores nemo. Nobis similique recusandae ipsum expedita quaerat numquam quod. Accusantium deserunt accusamus amet. Vero aspernatur nam eius possimus ducimus laudantium. Non provident sequi qui provident dolor atque id est quasi. Minima maiores possimus praesentium placeat at rerum magni possimus. Asperiores quia nisi doloribus quaerat vel optio modi mollitia recusandae. Asperiores quasi cumque itaque beatae nulla laboriosam magni. Ab est atque nihil ab quaerat.

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