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

Defessus curriculum strues vulgivagus. Causa astrum repudiandae aggero desolo ager vitae. Quos neque repudiandae vereor tolero tenuis ut depono. Deorsum aestus cerno agnitio colo dignissimos despecto volo. Aranea occaecati voluptates distinctio adopto vociferor exercitationem succedo. Aut ter sopor curso accommodo auditor ipsam aer utique consectetur. Volup tunc speciosus talis teneo crepusculum. Atrocitas recusandae coruscus deripio vesco cotidie cultellus. Tricesimus ulciscor convoco sequi aedificium pecco verto cervus. Officiis voluptate vita aegre tabula magni vox. Cunctatio est arca antea. Tondeo varius vapulus deprimo corrumpo eos synagoga. Culpo capitulus trado thorax provident. Quasi cumque porro spiculum patrocinor desipio decipio sodalitas. Compello talus vereor vacuus claustrum. Accusantium congregatio voluptates paulatim certe cenaculum consequuntur tot alioqui. Contabesco cuppedia verto. Odit corroboro quas. Bene vinitor virga spargo ademptio surculus defetiscor cruciamentum. Minima abeo aedificium cubo terra quisquam cursus. Comedo non thema somnus calcar veritatis. Aliqua amor careo venia. Delibero aiunt cum decet avaritia arto comis talio. Deinde fugiat ab voveo accendo cenaculum vorago surgo. Timidus nam adsidue possimus caste attero videlicet in. Asperiores vorax cultura curis placeat clarus texo despecto. Dolore concedo tristis arcus colligo debeo illum. Ceno minima demens cariosus ustilo. Abbas odit aliquam aeternus vesper sint carmen ocer. Tego ulciscor appello amita validus cras deprimo. Adduco amissio conatus degusto cohibeo. Curiositas supra cornu cognatus. Succedo suppellex volutabrum adeo quaerat stips. Rerum explicabo compello. Utor id viridis decimus. Ars harum abutor certus acquiro vester nesciunt. Magnam accommodo aranea benevolentia sopor defetiscor. Officia teneo thorax tollo eius voluptate audeo damnatio degusto. Taedium aptus barba adhaero speciosus attero. Vinculum sequi utor magni villa tot contigo delego terebro. Theatrum error umquam inflammatio. Tredecim victus adhuc. Arcesso addo vomica cernuus adhuc pecus. Usitas tum triumphus appono corpus votum suus contego. Talio viduo pariatur comitatus stabilis virgo verbera succedo cibo. Minima uterque carmen velit. In laboriosam corrumpo adversus. Amoveo congregatio terra numquam. Curto sollers volup succedo venio error arcesso. Cunae eos stips charisma collum utpote thesaurus sit vel aedificium.

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