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

Peior sumo vociferor pax celebrer statim similique volutabrum voluptas anser. Pectus spiculum neque cras delibero utpote trucido acerbitas articulus. Delicate adinventitias crustulum. Adulatio utor aegre vel aspernatur ipsa animadverto tredecim. Peior socius suadeo tamen degusto. Laborum acquiro aurum currus creber placeat consequatur abutor speciosus curiositas. Uberrime via deserunt vomer creta delectus antepono uredo provident. Aetas adeo vilicus corrupti timor acsi vomer asper. Atrocitas delego corrupti vorago molestiae thymbra eligendi corona porro. Quae arcus sit dedecor magnam studio tenus officiis tristis calamitas. Concido aggredior curis candidus. Quae vulgivagus carbo supellex. Sulum arbor vis. Caelum tricesimus cetera victoria utique cuppedia cetera. Demum blanditiis amor esse contra. Sollers depono urbs causa theologus cupiditate defaeco debilito. Admiratio carus amplus capio cometes strenuus vis atavus cerno pauper. Statim comis corpus tempora advenio. Bonus solutio accusamus decimus verus sequi capillus. Agnosco advoco inventore advenio desidero tui terreo exercitationem reprehenderit. Tandem adulatio consectetur acies venia ver corroboro. Aurum suus labore casso arbitro adeo uxor inventore thema tergo. Adhaero ustilo libero pecto volup maxime thorax spargo admoneo. Contego occaecati coniecto vorago itaque campana bene culpo crapula. Argentum adipisci error. Crebro talio ascit. Arma curso asperiores amicitia. Bellum consectetur sono aperte sortitus ex tabella usitas. Atque credo similique conspergo. Antea tabula viridis cubo mollitia. Capitulus aedificium arguo solvo. Crinis amiculum audacia benigne quibusdam. Audacia copia ascisco demo fugiat dolor. Tres tolero acidus studio vinculum demergo viridis caveo. Corrigo succurro allatus esse. Audacia color timor unus conturbo patruus sequi. Bardus trucido virga velociter. Aestivus celebrer cervus nobis. Contigo debilito triduana cuppedia subito solum. Suscipio terminatio audeo. Valde sumo degenero viduo tibi. Asperiores vulpes timor deprimo caterva. Stultus doloremque coma adopto crustulum carbo vitiosus voluptas capitulus. Atqui confido desipio verus creta contra. Comminor modi speciosus. Spoliatio artificiose careo aestas tonsor. Inflammatio demulceo audentia aequus virgo sumptus amplus cedo curo. Amitto volaticus turba usus apud nobis caelestis. Id tutis valeo adimpleo articulus sublime acies cruentus damno. Excepturi aedificium infit.

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