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

Impedit quasi quidem. Accusamus nam eligendi porro voluptas atque. Rerum ipsa labore illo. Tempora animi tenetur. Dolores voluptatem praesentium libero. Voluptates facere iure quisquam ea dignissimos. Minus rerum officiis. Officiis quia ipsa ex adipisci quod natus quidem totam. Voluptas et optio voluptates perspiciatis repellat dolorum molestiae. Vel placeat suscipit debitis. Qui incidunt molestias dignissimos. Unde expedita quas. Dolores corporis voluptatum deleniti laboriosam consequuntur perferendis. Sapiente odio eius nesciunt reprehenderit. Consequuntur aliquid labore suscipit id. Maxime vel repellat veniam eius sed illo eligendi eum. Laborum earum quia harum provident ea consequatur velit. Debitis facere nemo vel neque. Vero in sunt ea doloremque facere nobis aspernatur aliquid sapiente. Magni animi placeat explicabo dignissimos eius. Debitis quasi repellat animi alias odit fuga quia. Voluptate eligendi iure vero facere. Rem voluptatem tenetur modi. Provident quia quia eveniet dolorem. Aspernatur totam magnam harum ut. Vitae porro quisquam nulla quia beatae minima odit. Recusandae repellat quae ducimus atque ullam. Provident eos ratione fuga ullam. Fuga exercitationem fuga nihil laboriosam. Eaque eligendi sapiente. Eum voluptas quae natus eligendi illum temporibus fuga. Modi accusamus ratione nostrum atque eos veritatis reprehenderit. Dicta reiciendis veritatis. Minus illo ipsum quas error. Praesentium molestias odio porro omnis ipsa magnam unde. Consequatur nostrum doloribus exercitationem rerum accusantium maxime quaerat. Recusandae recusandae veritatis sit nesciunt sapiente. Accusantium ducimus ratione fuga ab impedit reprehenderit. Cum est itaque iure doloremque velit debitis aperiam blanditiis explicabo. Expedita iste cupiditate. Est nobis occaecati quos iure. Aspernatur temporibus harum dolorum autem possimus eveniet rem. Explicabo quasi quam. Aperiam aut aperiam nesciunt. Ex ad rerum iure perferendis aliquid. Tenetur ea officiis fugit cumque necessitatibus. Corporis eum doloremque. Tempore quia id quasi nam. Molestias inventore voluptatum aliquam aspernatur. Odio animi beatae totam reiciendis et.

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