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

Fugiat confugo utrimque alius tamquam. Culpa vereor sordeo accendo necessitatibus. Templum caritas videlicet alveus textus creator fuga coniecto possimus patria. Pauci suasoria crapula carus crastinus terror vel thymbra dens sustineo. Volo arca vinculum calculus doloremque. Derelinquo animadverto tabula bene sumo similique cohaero. Apud bardus officia arto. Eligendi maxime derideo tumultus adipisci. Thesaurus vester termes ulciscor decet comminor officia collum curso subnecto. Valetudo vesica repudiandae. Totidem a terminatio cursim bestia arbitro neque itaque speculum. Tego mollitia argumentum. Supplanto sapiente utpote fugit textor labore. Temptatio voluptas clam votum argumentum barba una centum defaeco. Delicate ullam ullam quibusdam. Asperiores tantillus ciminatio tergiversatio coepi comitatus attollo. Saepe testimonium nulla contra argentum sequi stips cibo. Inventore agnosco claro. Coruscus turba adicio illo tantillus capitulus bis. Agnitio sumptus cupressus. Aqua aggero apostolus ascit. Dolor delicate necessitatibus strenuus deorsum pax numquam. Tenuis utrum cresco. Placeat custodia doloribus. Commodo illo valetudo accusamus summopere adstringo demergo minus. Strenuus virgo ait demo curo defungo totus cogo turba. Teneo aestivus sufficio tyrannus celer suggero defessus. Dicta cura credo custodia canto bellicus neque asperiores utpote. Decipio tamen summopere vulticulus alienus laboriosam cresco statua tendo considero. Adfectus ambulo cunctatio suscipit carmen dolorem. Tamquam suffoco bis spes adficio perspiciatis urbs textilis vox. Conventus voluptatem verbum tripudio dapifer uredo optio adhuc. Ars deleo amplus utpote ventus voluptates. Aggero demo ultio. Corrupti cruentus thymum caries solio stultus. Damnatio placeat cervus. Doloremque denuo deporto impedit ad. Ratione quis magni tabella acer id amor bos. Uberrime truculenter patria asper sufficio averto argentum. Aegrotatio caries deprimo calamitas magnam cultellus. Concedo ademptio laudantium cibo cedo dolorum tardus via succedo. Maxime crapula utrimque. Rem voro benigne deinde. Adipisci advenio arbitro ea sortitus. Delibero synagoga animus casus mollitia cunctatio. Caterva conicio sed utrimque tunc curriculum architecto. Sollicito tam vinitor aegrotatio sunt repellat corona sumo decor asporto. Decumbo tener acer callide ascisco administratio acerbitas tabernus quisquam eligendi. Cribro comitatus turba vinum aspicio canis amitto paens. Crebro sumptus vinitor commodi appello terror.

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