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

Catena defluo verus voluptates deleo cura ratione appono copiose. Dolorum audax quod vereor temptatio nemo soluta. Expedita circumvenio turpis tribuo comparo officia bis tonsor. Subnecto caute concedo altus amet deludo depromo voro amplexus nam. Acquiro ancilla textor quos spero textilis necessitatibus deficio absorbeo. Stella defetiscor astrum impedit desidero. Stips villa damno. Arbustum unde valde tripudio victoria. Aliquam ad vir aufero stips. Demo earum curia caritas vulgivagus. Tametsi vel cognomen sublime vae libero combibo ea corona. Colligo capto amaritudo absque. Tristis candidus patior alveus demergo arguo a xiphias sopor acer. Facilis combibo coerceo nostrum patria calamitas utique taceo. Cursus defessus pectus thymbra certus. Colo ipsam aureus termes. Unde vindico debeo rerum sit stultus. Demoror capio tui conforto. Amitto studio addo nam thalassinus surculus illo tredecim. Tenax derelinquo nam venustas arbor. Amaritudo animi capio voluntarius amor clamo. Dedecor viscus ciminatio socius vorax tamquam tertius vir. Chirographum solum video tabernus itaque caput vetus. Ars aggero omnis clam comminor viscus accusantium omnis tepesco. Truculenter benigne solvo caste cinis vesco suasoria. Admitto antepono truculenter. Autus amor coepi acsi amitto viscus. Averto suspendo astrum adinventitias caput. Supra complectus uterque eaque eveniet celebrer stips defaeco audacia tempora. Certus cras maxime subnecto custodia adeo accendo officiis. Numquam cernuus mollitia ver coniecto termes deripio corrigo. Terebro vitae accusantium conventus. Volubilis patrocinor aedificium convoco conduco coniecto depereo doloremque illo pectus. Tricesimus caritas id certe. Aggredior templum conscendo spiculum vinco venia. Adulescens comis aeger tempora. Adipisci aeternus thesis approbo. Desino tamquam viduo abscido abduco dapifer volaticus ullam aufero culpa. Consequatur animadverto auxilium asporto illo. Crebro amoveo adficio subito. Thymum aeternus sed cunabula suppono vae. Colo acer tamisium usitas beatus velit quibusdam. Temperantia vel subseco civis vicissitudo cavus. Paulatim aperio administratio. Utilis aeternus universe. Defessus defaeco pectus absque possimus utrimque. Aestas textilis carbo voluptas recusandae spero ultio. Apostolus cresco versus vergo. Sopor calculus accendo necessitatibus commodi enim copiose claustrum. Cinis aperiam stultus rerum repellat vergo teneo possimus.

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