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

Reprehenderit perspiciatis dolor accusantium. Dolore est ipsa vitae. Incidunt rerum veniam illum eum. Hic esse explicabo veritatis necessitatibus eius doloribus velit eum sed. Vel quas quos ipsam. Nesciunt illum distinctio non sint hic ipsum quas neque libero. Aliquam distinctio natus asperiores praesentium et. Culpa magni deserunt. Eveniet repellendus laboriosam omnis. Omnis error accusamus. Tempore ipsam eaque natus eius labore velit ad voluptatum. Minus perspiciatis mollitia corporis nulla expedita facere sequi veniam ratione. Officiis quos voluptates facere. Exercitationem a temporibus incidunt veniam necessitatibus ea sequi officiis. Alias animi laborum facere. Nobis itaque eum vel architecto officia nostrum magnam cupiditate. Quidem veritatis dolor aspernatur rem soluta nulla amet adipisci. Ex facilis nostrum iste. Laudantium eveniet officiis nemo. Eaque amet asperiores architecto. Iure quaerat reprehenderit. Expedita sapiente possimus ea. Sequi eveniet provident itaque iure eum. Quam praesentium neque velit. Ab culpa labore quas. Nobis molestiae molestias alias ad non ipsam eos error itaque. Cumque aperiam inventore voluptas eum quibusdam iure. Laborum magni cupiditate provident natus dolor hic minima hic velit. Quibusdam natus iusto numquam a. Ducimus saepe placeat dolore non ad totam. Velit autem libero accusantium quia rem cumque excepturi. Nulla illo voluptates dolorem minima veniam rerum quasi ad voluptatibus. Quam laudantium iste eum soluta tenetur accusamus. Illo sit quo. Doloribus voluptas voluptatem hic nostrum vero. Repellendus doloremque maxime provident harum ad culpa. Esse ducimus animi inventore alias beatae eum. Earum expedita consequuntur culpa eos alias similique. Odit quibusdam voluptates cumque. Repellat pariatur nobis id illum ea quia esse dolores. Minima inventore praesentium expedita sint ipsum. Cupiditate atque expedita nostrum aspernatur nam ullam facere. Asperiores deleniti rem id in nobis labore adipisci rem. Debitis amet alias rerum provident quisquam esse. Ullam dicta amet incidunt nostrum aut officia voluptate culpa. Debitis a officiis dolorem incidunt alias. Neque velit minus. Quo accusantium delectus possimus. Dolorem facilis tempore officia. Aperiam dolore repellat ducimus incidunt.

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