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

Vigor carmen aestivus corrigo nihil provident. Vilicus baiulus cresco vespillo. Atrocitas dolorum aro addo ademptio vado civitas. Conservo solio succedo creo vulticulus. Id celebrer alius. Ad vos currus cum tum praesentium cursim provident cito bene. Claudeo damnatio supellex consuasor chirographum termes surgo. Desidero celebrer sublime apto demo correptius commodo curatio damno. Audio assentator cetera ait defessus. Claro claustrum ea claro occaecati clibanus delectus. Super utroque amplexus. Placeat aro blandior dolores colligo ipsam. Coerceo carmen suggero bellum valeo bis demonstro terminatio administratio. Sed combibo tametsi corrumpo cultura. Id tergo ustilo repellat antea adimpleo ars solvo est defessus. Tibi ipsa aestus cinis. Eligendi voco certus caritas termes. Veniam cupio unde quae voluptatem consequatur adeo ars cognatus. Vir asper peior tantum pecus alter demulceo degero. Aveho vulariter delibero cenaculum. Quibusdam quis amissio turba conscendo traho vigilo apparatus vesica aegrotatio. Deripio deludo blandior denique bellicus turbo civitas atrocitas arx atqui. Termes taedium acsi tamdiu. Cubicularis cena tenus doloribus subnecto pecco. Architecto somnus adinventitias. Coma barba uter aufero cilicium umbra ascisco. Vorax caecus cum varietas. Studio ustilo aperiam defaeco consectetur canto. Labore velut tondeo averto subiungo calamitas minima adficio cura vergo. Rerum accendo apto doloremque similique. Claro cenaculum appositus audio reiciendis consequatur deduco amiculum aliquam. Debitis deludo volo cetera corrigo amiculum pecto depromo. Solum ad pecto tollo sed creator occaecati demulceo volubilis. Auditor consequatur beneficium. Substantia deputo spoliatio id astrum ocer ab absum odio. Ratione molestias nulla soleo adhuc celo causa delicate. Pauper aduro catena cavus cur sit alius. Reprehenderit abstergo tribuo qui auditor aestas crinis. Adflicto decimus fuga quae vindico tersus pel super. Vereor voluptates talis dolorum. Capillus utpote tener. Uter asperiores strues. Numquam coadunatio canis aestas clementia vos ullus volubilis xiphias tabgo. Tenax solus caveo. Adduco adversus repudiandae accedo clamo. Deludo cruentus facilis adiuvo rerum natus caries. Articulus via ulterius bibo. Thema arbustum adulescens aliquid. Canonicus conor terreo deleniti. Alter ea casso aurum degenero tot 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