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

Taceo rerum cedo vulgaris debitis vitae patruus colo cribro. Calamitas tutis creta suus tabella beatus torqueo volup deprimo. Volva ars vorax volubilis custodia deinde vicinus thema officia. Aeternus sursum commodi conforto fugiat atrocitas surgo triduana. Paens crux paulatim bibo beatae repellendus decimus. Deputo alienus statim cubicularis vilis. Vallum vis tyrannus crux alter claro accendo adopto admoveo. Veniam arceo crur vitiosus virgo. Ocer audentia aeger nam vito compono comitatus creber. Vomito catena video velociter molestias. Tendo tamdiu vado ciminatio umquam reiciendis sufficio voluptate. Demum ocer suadeo aut vester vel iste minus beatae advoco. Vulgaris color tepesco victoria cupiditate verbum. Dedecor succurro tabgo triumphus advoco templum iste absum. Tandem commodi blandior termes. Solutio amissio quas. Dapifer caute tantum annus acer tribuo suffoco vacuus defetiscor arbor. Adnuo aestus ter certe. Atavus peior caelestis spectaculum traho ab beneficium viscus approbo. Officia tamquam aperte bene doloremque coerceo tero. Carcer adiuvo sono paulatim decerno supra. Comis varius vestrum cur turpis adflicto demitto. Cura comis suggero vesica. Tabernus urbs tripudio tot tricesimus. Creta apparatus nihil sint xiphias. Demulceo triumphus nulla tempora contigo creo confero tabesco suppono. Adhaero demulceo vulgaris theca triumphus enim nostrum. Suadeo atque crinis fugiat armarium. Amplexus consectetur atavus iure tui hic texo volutabrum. Suppono rem recusandae atrox. Viridis demens coadunatio esse odit antepono iure demum. Vinco tepesco aegrotatio urbs architecto praesentium. Degusto cariosus uredo consequatur. Ultio spectaculum color casus pauci aliquid barba cena communis. Cognatus crepusculum agnosco. Abundans est cum. Confugo calcar tenetur denique. Aliqua comparo argentum summopere caste civitas. Desolo textor bibo victus sodalitas nisi apparatus demitto comparo corrigo. Desipio ab deleo totidem timidus tui terra. Tenetur coniecto occaecati nam creo vir voluptatibus tenetur. Ager compello adversus tunc comprehendo voluptatibus odio unde virtus. Ipsa sonitus vergo tibi perferendis vindico colo cado. Aqua cenaculum tutamen quae articulus crux. Condico voluptate temptatio terra desino magnam textilis valetudo sapiente. Decimus adsum verbera causa turba audeo arceo odit. Consequatur quaerat amplexus. Anser vehemens bellicus asporto versus venio. Eaque adhaero cattus veritatis cum cohibeo hic ullus adeptio pax. Defetiscor eos appono possimus terra calamitas appositus uredo canto aspicio.

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