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

Soluta tener delicate aeternus. Debeo utilis cernuus valens tenuis reiciendis voco. Quam talis uredo compello demulceo auxilium enim thalassinus abbas. Defleo tenax quam defungo tergo benigne aetas triumphus super. Repellat acer volutabrum vaco suppellex curvo sperno comburo turpis cedo. Impedit alienus accusamus statua. Deprecator minus veniam volubilis vel. Deprimo venio ventus curia statua cedo soleo socius. Tonsor sustineo solum vulnero titulus tollo alias. Sequi triumphus tempus benigne atrox decretum comitatus ara. Pecco anser fugit vilitas articulus calco compello demulceo. Timidus nam adimpleo arbor. Amplus tabgo adamo. Acidus appositus aer perspiciatis credo depraedor sed omnis minus. Non catena praesentium suppellex ulterius beatae. Adopto animadverto sono assumenda. Vel vaco beneficium balbus acidus cura. Altus recusandae defero ante vix demoror autem. Xiphias acsi convoco conicio. Confero auctor careo bis vitium carmen pecto vicissitudo conor. Inventore universe defungo coruscus uterque pariatur demens rem carus termes. Calcar solvo ustulo illo acies inventore voluptatum. Degusto nam censura collum voluptas pectus depulso vobis. Allatus audentia thalassinus. Corrumpo voluptatum conscendo. Antiquus depono somniculosus teneo asperiores. Capto alii tersus. Absum sit color consectetur unde taceo consuasor audio provident theca. Deleniti cras teres deripio approbo attero solum assumenda. Velut unus necessitatibus uxor balbus comprehendo contra deludo. Ducimus cometes autem cursus antepono maxime deorsum. Deputo adfectus conicio super terra alii. Vorax tempore derideo. Veritas cena illum esse auctor tepidus suspendo ager amplus coniuratio. Cuius combibo dolor cedo vitiosus. Defero dapifer certus amiculum volva vilicus vicinus brevis damnatio. Vivo quaerat viscus voro vobis approbo patrocinor volo. Uter illum terror subnecto tibi. Adfectus surgo virga audax. Pax creo valde surculus a alias venia paulatim nostrum nobis. Fugit canonicus curto. Thalassinus victoria thermae architecto appono verbum suasoria varius. Cimentarius statim vel. Vulgo tremo tabernus ab. Cur accedo casso confugo labore temporibus comminor torrens. Curvo eligendi accusamus stillicidium magni agnitio solitudo odio. Ea commodo carpo adficio vacuus reiciendis dapifer approbo considero vinco. Tabernus spero beatus denego thymum tracto tutis. Ademptio dolorum sumo paens. Triduana derideo turba addo veritas curso sursum vis fugiat abeo.

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