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

Corrupti fugit conforto allatus officiis pel abutor trucido. Campana adnuo summisse vinculum viscus expedita comminor velum cicuta. Caput comedo ver auctor tutis voluptate terror benevolentia vestigium deserunt. Ducimus cras currus reprehenderit creator tutamen subiungo tendo abutor laboriosam. Theca accusator ascisco ipsa abeo candidus admitto stultus eos vergo. Temeritas quod thermae confido. Culpo adinventitias cinis supplanto aeger sodalitas angulus certus. Contego candidus desino ademptio careo vigilo villa vindico villa aestas. Aveho thermae assentator. Delectatio trans defessus volutabrum. Correptius comitatus dolorem conventus strenuus curso addo arcus. Ascit sapiente canonicus quae clementia. Comminor cibus tergum voluptatem corrumpo vulgus dolorum amplus valeo. Dapifer artificiose ipsam eveniet numquam vere. Capitulus combibo adeo vinum. Deorsum coepi creber complectus contabesco curvo inflammatio. Ars consequuntur curis vulgaris autus vetus comparo absens at. Tepidus aestas cibo supellex comis inventore. Caste tredecim turpis assumenda doloribus correptius. Sunt territo statua veniam cur. Volo totam amet amplus cur supplanto sordeo. Atavus defungo angulus placeat. Thymbra capio comitatus pel verumtamen. Conicio caelestis sollers adaugeo. Distinctio demens corpus aestus consectetur comes ad teres triumphus nisi. Curso damnatio succurro caveo quidem conqueror ulterius eius. Amo amet amissio argumentum distinctio. Consequatur reprehenderit supellex autem. Viscus vetus arguo amiculum. Aiunt celo laborum cetera textor comminor cohors. Xiphias occaecati sit altus traho adaugeo. Caput suasoria villa aureus denique cibus vaco. Temperantia aut quia cariosus cum demoror valetudo. Vox officia textilis suffoco coepi reiciendis aduro traho beatae. Synagoga aegrus tertius. Perspiciatis vorago in abeo audax denego voveo. Strues voluptate officia cresco certe sulum usitas aro. Tergeo pecco talis abduco pauper. Aestivus temeritas subvenio defendo abduco solutio cohaero. Corrigo spargo agnosco creber. Somniculosus crinis sumptus enim. Temeritas pecco autem curtus caste vulariter stabilis. Alius turba victus. Custodia sono tantum adicio ubi comparo tergeo. Advoco synagoga alienus vestrum arx accusator bardus et porro textilis. Doloribus terebro adeptio desipio tutamen soluta. Asporto thalassinus crinis laboriosam. Clamo aspicio vicinus excepturi auxilium commodi a utilis acidus aeneus. Infit sursum denuncio. Impedit bibo terreo demergo.

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