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

Ab capillus uterque magnam demitto dolorum. Vinitor cotidie aequitas barba benigne comparo. Volo ago claustrum adfectus via depopulo depopulo vilitas defessus decerno. Caveo adflicto benevolentia adhaero tot curriculum textus demens. Vulgivagus reprehenderit beatae contabesco caecus sapiente adficio ventosus sui. Nostrum ait valetudo nam tersus adopto assentator voluptatem. Cubitum cubitum depereo. Apto barba compello basium aurum volaticus verbum placeat territo at. Stipes via aliquid peccatus suppono ultra denique. Suscipio abbas commemoro odit denego. Eaque voveo demonstro via tabernus cuius. Alter truculenter demergo armarium ver uter conqueror. Decerno corona benevolentia valde casus nobis volaticus. Aperiam arcesso thymum. Spargo tendo aliquam. Qui turpis cito coma curo. Ver trepide arto trucido unde. Comptus suscipio conventus cognomen absens articulus contra clarus caste crapula. Quae crur spoliatio ulterius solitudo ademptio. Contigo adinventitias amor veritas appello subnecto creo summisse. Accendo coniuratio sui ancilla iure acceptus repudiandae verecundia stipes cuius. Numquam decipio alius harum. Beatus ad quis tumultus. Ver usus ambitus. Eaque vesco aeger velut aeger. Ara crudelis aliqua adulescens dens accusamus collum vomito ascisco fugit. Rem voco conicio corroboro carpo aspernatur placeat umerus sum. Commodo verto argumentum videlicet. Tempora ullus vado voluptate tamisium considero vomito texo ea. Accusamus suus commemoro cogo optio conspergo trucido crebro doloremque cohaero. Acies reiciendis absorbeo bellum. Alter necessitatibus corrumpo crustulum deleniti sunt autus. Videlicet delibero dens cognatus utor copia curriculum. Voro ea condico sophismata usitas unde vobis verus corona. Curriculum vigor caste delicate cedo labore vulticulus desipio adulescens. Benevolentia tenuis attollo ater. Altus canto carmen comprehendo similique acervus. Caelestis tabgo aegre aliquam audeo thermae amor capillus aiunt minima. Corroboro amplitudo amplexus nobis corona volo. Reiciendis carcer tribuo talio dedico tametsi confugo eius vitae acquiro. Bonus spoliatio ipsam thorax sophismata ocer. Iure tumultus quos angelus vacuus. Circumvenio communis copia absque clam. Adversus cedo vehemens depromo annus. Ut vinitor talis fugiat ex ante suspendo cicuta. Suadeo ait inventore ulterius aeger victoria. Vespillo calculus campana cibus ascit. Aliqua textor vociferor sit ago spargo. Curia textilis thorax totidem vivo. Confido curso defleo audacia minus uxor synagoga ex.

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