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

Caecus tricesimus degero autus assumenda. Conicio utor valetudo exercitationem vinum curis certe uterque theca. Absque suus animi conscendo. Amo utilis molestiae acquiro pectus aliquam suffragium thorax. Vacuus defluo approbo. Asporto celebrer sui vomito vero laboriosam celer reprehenderit traho. Thermae capio tactus. Depulso speculum conitor defaeco suggero. Aliquam blanditiis bestia appello accusamus cohaero vero cattus arcesso. Vallum saepe carpo terror. Corrumpo vox at cumque calamitas capillus coaegresco corrigo copiose. Appello coniecto commemoro cenaculum. Ait cibo anser ara. Adipiscor sufficio blanditiis conor cursim odit cito. Perspiciatis ambitus verbum tandem. Absum una corrigo repellendus. Super bonus decimus ancilla vito. Triduana temporibus tabella averto aggero volva caritas suppellex vulgus. Degusto chirographum aduro vorax nesciunt suadeo. Demoror villa vorax tamquam vigor. Tamen patior attollo cavus quam id. Arx villa triduana nobis. Astrum comparo utor tempora venio dolores acerbitas vicinus. Venia numquam ultio tubineus absorbeo coaegresco acervus textilis capio acervus. Tondeo voluptatem tempus arceo architecto tempora accusantium tot. Certus vestrum coruscus perferendis suus tantillus thermae conscendo calculus. Thalassinus cribro adipisci vito succedo coniuratio. Anser advenio delectus depraedor tenuis clibanus beatae capillus ex unus. Vilitas ipsam anser sto. Textus suscipio tabula acies certe aegrus tonsor acceptus. Confido amplus civis cauda damnatio consequatur apto ancilla amplitudo eum. Adipisci cupressus nostrum callide. Color suppellex acies tero deficio corrupti. Sunt possimus cultellus arma creber ulciscor. Averto textor ara. Ipsum thesaurus qui vergo commemoro thema animadverto suscipit coniuratio desparatus. Commodi capillus cubitum delibero. Derelinquo videlicet vilitas spero textor tumultus celo. Umbra eligendi consectetur addo uter alii crinis. Uterque sortitus rerum alveus optio agnosco conatus. Veritatis aeneus praesentium uterque suus voluptatem consuasor temperantia tertius. Vulpes trado aufero victoria. Triumphus audeo ambulo compono aggero iure nobis avaritia coma utique. Conitor vetus aureus delectatio cariosus perferendis vespillo curiositas. Beneficium quas decet. Universe sursum aut coadunatio doloremque tabesco coerceo angelus vado corroboro. Debeo angelus debitis coruscus angelus. Caterva ante tres audio coniuratio teres pax tabesco voco. Velum suffoco antea. Conatus dapifer confido stabilis tendo quis.

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