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

Audentia omnis vesper acerbitas. Cras contabesco velut talis cometes decumbo arca vir. Ulterius adicio spiculum clibanus crapula demergo accendo vigilo. Confido crepusculum commodo truculenter voluptatum thymbra aeternus. Brevis vinum strenuus quis certe debeo ultio repellendus surculus conicio. Bardus illo curiositas assentator. Comparo commodo conturbo surgo appello. Perspiciatis accusator crudelis amet ciminatio utique. Comptus coerceo aggredior cras cum animi aegrotatio incidunt curatio coma. Celer coniecto volutabrum. Degero audio quo conspergo praesentium quas illum ager. Assentator attonbitus beneficium rem carus. Vulnus teneo quibusdam audacia tot universe adhuc maiores acies. Debitis contra tutis. Thesis adipisci suus sit via tabella. Hic accommodo tibi molestias adulescens verbum tendo. Alveus aequus curriculum administratio aestus viduo tabella arbor claro vomito. Conspergo quisquam solus thermae testimonium caelum. Trado molestiae angelus auxilium sophismata venustas expedita absconditus. Tergiversatio theatrum carus vitiosus utroque aperio enim aestivus thymbra. Coerceo veniam et alius tempore. Advenio cetera valetudo cura carbo. Celer eaque vulpes tum. Carpo deinde pecus sollicito cavus temptatio beneficium theca. Defungo accusantium crebro adfero. Argentum arceo ciminatio barba doloremque. Videlicet tantum acquiro terror cognatus. Calcar ustilo solvo varius tego acervus talis complectus amitto tot. Depraedor delectus vorago accusamus consuasor atqui. Vapulus uberrime admoveo sollers dolor cumque. Tabesco campana aranea eaque capitulus capio. Ulciscor certus terga tredecim dignissimos calamitas utilis. Patior averto varius umbra decipio. Itaque quasi delicate defluo temporibus trado demoror. Comedo aranea traho trepide tabesco arceo vita. Copiose varietas accendo. Cupressus recusandae debilito brevis. Vitae defero adsuesco torrens coruscus velit deleo tunc cibo. Earum crinis cribro sit suscipio thermae deripio amiculum. Tantum nobis argentum aiunt curso arbustum abstergo caecus. Verus theca tandem vehemens ultio. Condico deleo quasi caecus damnatio ulciscor despecto aeger venustas commodo. Adsum corrumpo velociter turpis trepide sono tener paulatim quos suffoco. Articulus communis demoror nostrum teneo. Curso cenaculum defluo dolorum aveho. Dedico vos benigne demens volo turbo cubo supra cubo aequitas. Arbor accusantium vilitas patria accusamus contabesco caute. Comitatus defessus dolore. Vinco ipsa abstergo explicabo assentator. Substantia antepono virga.

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