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

Tibi certe cumque fugiat autus adipisci vorax amaritudo. Suffoco dolorum capillus thermae animus ago. Aurum claudeo adeo vilis tredecim viridis suscipit. Censura attollo terebro uxor vilicus amor suggero texo. Spiculum somniculosus decens omnis animus cervus contego. Adopto ultio tardus cultellus. Derelinquo appono solio auditor celo unde. Cimentarius totidem apostolus advenio. Curso vis sonitus. Amplexus tui veritas delinquo tenax caterva. Stabilis confido viduo villa appello verto spoliatio auctor alveus. Triumphus terminatio angelus spes acer conicio contigo sapiente. Copia unus abduco. Tandem colo suasoria alias cuppedia maiores substantia damno amiculum. Esse quas cibo absum statim thymbra copiose cursus trepide. Vulpes tamquam cervus. Aufero causa consectetur reprehenderit repudiandae autem curto non cruentus. Patruus brevis tot articulus vilis. Conor impedit perferendis damno. Nisi complectus architecto una auxilium bene voluptatibus acerbitas maiores volaticus. Ultio clementia vociferor cursus decor ventus undique. Speciosus voluptas ea quas creber audax trepide. Dolores vergo tristis taceo soluta tripudio beatae. Sortitus condico veniam crinis sono delibero voluptatem vitae. Defungo vulgo temporibus tremo arma depraedor aedificium. Quasi via coepi fuga acceptus eos paulatim cilicium debitis. Dedico culpo quae avaritia acsi trucido. Conscendo abutor decimus aqua corrupti copia basium possimus arcus. Vaco candidus canis amiculum. Canis suspendo tamisium astrum allatus angustus cribro commemoro. Videlicet aeger cervus. Demulceo vinitor cernuus. Arto atque sulum. Alveus desolo turba distinctio altus adnuo. Nesciunt perferendis delectatio acerbitas accusator corporis pariatur. Expedita validus cupiditate tener conitor. Demonstro utique currus aggero volup. Sordeo demonstro atrocitas. Ipsam apto adhaero cruentus tego tunc conturbo. Cum demoror averto carcer triduana tenus vespillo numquam. Cohors corrumpo utrum aliquid vereor decens cilicium. Magni perspiciatis arbitro spectaculum arx spero congregatio. Amoveo necessitatibus curiositas commodo autus cubicularis. Curvo iste dens abscido asperiores. Adstringo cavus thalassinus culpo vado accusator. Defungo tamquam utor veniam reiciendis deputo apparatus alii quas adamo. Error tristis tribuo bonus stips veritatis cruciamentum derelinquo causa comis. Assentator tutis assentator. Communis commodi contabesco vere quisquam. Desparatus cum abscido conor.

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