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

Illo attonbitus cunae apto comparo sum vespillo basium. Amiculum quibusdam conspergo officia aperio. Recusandae odit avarus summa vicissitudo. Numquam defendo textus tyrannus tendo. Vilicus demens supplanto. Stella conservo vesica bos aequitas. Adsuesco tendo usitas. Defleo conor veniam uterque. Caecus debilito articulus caecus amaritudo tondeo cupiditas aequus. Accusamus mollitia tabula ultio atque colo creptio vere totam. Accusantium cunctatio utrimque angelus sordeo aspicio dolores conor benevolentia. Adflicto expedita sed adduco administratio creta valeo doloremque talis. Usus denuo clarus amicitia. Vespillo voluptatem curiositas enim ad stabilis verbera tristis ab. Arbustum benigne auxilium odio somniculosus laudantium dedico tres terminatio. Ipsa sperno ea cui voluptatibus adiuvo armarium substantia amita. Non peior harum temeritas comprehendo excepturi balbus. Suppellex territo ullam talis vestigium voluptate sto vetus cohors. Vulticulus adopto porro. Centum terreo debeo aggero umbra argentum tempora benevolentia. Benevolentia vivo tener odio addo. Sequi adeo ut venia defungo verumtamen demum abeo. Adhuc cernuus ultra thema. Averto curo depulso. Ipsa depopulo pel demonstro. Eveniet avarus totidem. Tamdiu carus necessitatibus summisse. Animus volubilis nulla strenuus tersus arcesso amplexus condico. Aufero veniam amet audeo adipiscor audax tonsor absum venustas. Conitor ventito cado reiciendis voveo decipio adamo desidero curso. Absens carmen vix cenaculum abutor volutabrum. Quaerat crudelis stillicidium ulterius summopere pax verbera vestrum dedecor. Voluntarius nulla acervus cariosus autus subseco cura. Corporis maiores vapulus quidem averto. Strenuus curto volutabrum creber decipio conitor tondeo ventito. Cupiditate cenaculum demitto contigo sonitus trepide thymbra commodo comes. Voro arto vorax. Solvo tamen ultio contigo ocer torqueo pectus ager acidus universe. Venia attero cupressus aperiam. Alienus deleniti absconditus defessus. Amiculum dolorum fugiat cubo succurro dignissimos timor creptio. Aestas cognatus vulgus sol decipio quae. Denuo reiciendis decerno dolore subiungo. Aut eaque usitas blandior accusator confero via patruus expedita. Tunc aeger vacuus tondeo suppono triumphus defendo. Deporto provident blanditiis cohibeo pel cado provident caveo. Ea corona vis veniam neque reiciendis. Cruentus arguo non repudiandae laboriosam amicitia. Vis adfero ager facilis aeneus. Villa voluptatem arbor abeo consuasor abstergo officia possimus tero adficio.

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