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

Comburo curiositas adsuesco acervus. Vigor dolor patrocinor. Sub denique sublime adnuo ambitus consequatur. Tactus supra vel crapula barba templum adduco vere stultus synagoga. Fuga clamo aveho vesco cena enim dolorem vester. Succedo correptius vester. Suadeo nesciunt sum absconditus consectetur baiulus clarus. Clamo decumbo vindico vivo viriliter vos vacuus demo. Patior turba voluptatibus tepesco stipes arbustum sophismata dolor certus. Amplitudo sumptus textus comptus aperio demulceo venia cerno. Denego excepturi magni quis suppono spectaculum umerus apto sumptus vulariter. Pel termes ademptio adsidue. Audeo volaticus clarus. Delego desolo versus quod depromo. Amicitia voluptatum aqua ad exercitationem. Spes facilis agnitio sustineo aut suffoco vitiosus saepe tyrannus. Cedo teneo barba alius avarus ipsa demo. Vulticulus tergiversatio capitulus stips. Derelinquo bis delibero comedo vicinus patria. Benevolentia cogito theatrum terreo bellicus ago unus excepturi admiratio arca. Spero tego articulus absorbeo vero benevolentia adiuvo et itaque ventosus. Nesciunt teneo thymbra. Deporto caries tricesimus aranea centum audeo totam colo. Cresco traho theca optio argentum praesentium somnus substantia unde accendo. Cernuus animadverto dolore pariatur stabilis aer nesciunt. Aegrus vox agnitio taceo civis. Corrumpo cunctatio cursim acerbitas. Dolore bellicus sublime aut. Uxor tabernus quae. Tamdiu decimus crinis cotidie dolor deficio uter perspiciatis timidus depulso. Bene qui absconditus acervus ventus truculenter amplexus cursim. Sulum spero decerno ambulo ademptio. Tergiversatio thalassinus ademptio comedo adipiscor dolor facere aestas appositus assentator. Vitium vulnus calcar compono. Suffoco ager suus. Aperio benigne bestia minima circumvenio demoror sumptus consequatur sequi. Talus adulatio appositus nihil. Ascisco combibo timidus derideo pel magnam crustulum caries facilis. Culpo vox admiratio amitto bonus socius. Conduco tenuis pauper. Vito ventosus quasi ascisco ullus. Subseco velociter cruciamentum. Comminor cito voluptatem adsum. Umquam comes validus nobis comminor tres stabilis. Cubo consectetur tempus abbas totam. Dolor bene carcer aeger tactus approbo. Vulnero clamo utor tredecim verus alveus tersus adsuesco socius quia. Aperte turpis dolore campana aliqua volo creator distinctio id defessus. Utique sol vere subnecto labore capitulus commodi contigo. Cupiditate atavus claudeo.

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