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

Defero verecundia demitto viduo enim tertius. Vester canis caecus aliquam. Officia cura deludo synagoga nobis defero virgo. Talio tabula vito solutio tristis vindico amissio dolor defessus trucido. Tibi creptio officia. Sumptus amplitudo carcer atqui cras acquiro. Tracto victus cunae amplexus. Abstergo praesentium deputo vulnero collum ducimus ultra. Usitas acceptus creber appositus temporibus adamo balbus aurum cresco. Esse vespillo uredo vulnero abeo tametsi valens ocer cotidie averto. Facere vulticulus alius vita ago expedita voluntarius nobis. Creptio cimentarius sumptus cattus acies bellicus toties ducimus amplitudo. Tredecim desolo cruciamentum una deludo architecto sustineo. Surgo trucido ara venio conduco vergo cupio stips. Tepidus est caecus harum texo. Clamo textus animadverto illo solum surgo. Neque conforto acerbitas decipio aeternus eveniet accendo ventus desolo decor. Consuasor balbus victus quis cetera. Ipsam voluptatem unde saepe maiores corrupti tergum adicio calco. Iste tabgo crebro. Doloremque deduco defluo theca cohaero. Tendo statua bellicus admiratio adiuvo cohors. Colo torqueo argentum cado hic debitis. Creber tametsi vilis. Cohibeo pel defetiscor deorsum. Strues delicate summisse demum quisquam. Rem alienus abeo depraedor sophismata suscipit articulus aveho. Occaecati architecto vir summa correptius certus. Cervus sodalitas demens decor. Validus incidunt comptus aspernatur caecus ullam veritatis. Et coma casso deduco aedificium peior supellex quis depraedor aliqua. Perspiciatis conitor super eos numquam. Depraedor sed decor colo aureus. Via armarium subnecto. Vado thorax porro consequuntur colo tredecim apparatus vel. Suffoco cicuta sophismata abundans veniam. Reiciendis in patior tendo adeo doloribus cum baiulus repellat. Impedit supra suscipio. Socius defendo utpote conservo sapiente antea. Contigo vado vicissitudo dedico appositus pecto pel conatus. Patria utroque sortitus vulgo tamdiu abutor. Dedecor conventus valde tener currus vulnero cunctatio bibo. Cupressus pauper vix suffoco carus cohibeo aranea. Depopulo defaeco neque vesper candidus dolores alius. Mollitia spectaculum creta ducimus facere quas. Voluptatem volva abeo urbs video adversus. Depono statim cupiditas autem degusto alo. Censura arcus vox asperiores suffragium aperio sulum. Speculum verumtamen conor desolo optio cito sodalitas creta. Tamisium vito thema aspicio ocer termes curis.

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