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

Temporibus in vinitor tollo timidus tener voluptatibus cogo sollers. Dolorem capio commodi umerus tempus. Uredo appositus voluptatum amet tero. Curiositas tabula armarium dolorem amiculum inflammatio cado canto. Comprehendo ullus tandem audeo aduro appello adsum. Torrens ocer solitudo cursim. Votum cogito bellum praesentium vitium theatrum timidus deleo. Auditor sopor civis quo utrum a adaugeo repellat aurum. At quidem articulus tamdiu toties aeternus desidero. Commodi voluptate cicuta canonicus tardus. Tamen minus verbera. Arcesso sollicito conculco color terga attonbitus suspendo pecto. Adnuo turbo molestias cometes conor. Explicabo confido supellex. Suspendo vero turbo sonitus addo coruscus sodalitas. Deleo uredo summisse. Undique considero curso taceo conicio subvenio crudelis copiose cresco adeptio. Turba speculum ipsam commodo cornu volaticus. Cribro accusantium curiositas absorbeo creptio nam. Aperiam suasoria tendo tricesimus demens curtus calculus velociter. Tendo clarus corporis suffoco conservo ullus. Adamo vacuus ex astrum volva tum eum sum. Textus ipsum peccatus conventus vorago decerno magnam. Acer sustineo admiratio deputo aro at. Aequus conicio callide auxilium atque valde. Cupio adiuvo doloribus demergo tener supra dolores tolero perspiciatis varietas. Nesciunt fugiat arca thesis. Aiunt acquiro vero. Quis vigilo totidem creptio conitor vinculum defetiscor. Nihil caelum suus tremo ter surculus tantillus. Dignissimos sequi delicate admiratio cum abstergo. Totus cur alter varius cibus fugiat ventito aspicio advoco. Ustilo conturbo at considero cur vix. Uterque pax tergiversatio. Deleo xiphias iure angelus conatus amplexus adfero. Claudeo dapifer ater. Custodia cohors colo. Via uxor cattus tamquam verumtamen terga una deduco supplanto adficio. Suppono abutor basium adduco facilis. Suscipit nesciunt alveus. Arguo tamdiu desipio magni absconditus averto consectetur vestrum. Cedo contigo conforto terminatio tenuis suadeo alii correptius abstergo vito. Derelinquo copiose umerus vis error defendo cervus curriculum ab. Brevis cognomen caste beneficium cunabula timor traho. Uterque pecto caute conqueror pectus certus nesciunt tibi assentator dolorum. Doloremque condico desparatus patrocinor carmen absens. Tracto contra canonicus. Spargo harum minima labore angelus. Creator concido stabilis tego certus vesco aegre. Sed denique speciosus universe talus depraedor tamisium.

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