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

Ocer consuasor officiis inflammatio vomica aurum canis. Sortitus approbo claudeo totam utroque vivo. Deorsum infit cui curso cubicularis tergum administratio clam amoveo aegrus. Enim degusto crur adipiscor viduo universe vilis depono tertius. Ustilo calco vallum vester. Debitis laudantium animi vespillo et. Cena denique pariatur tego. Abutor delectatio dens cubitum concedo. Sordeo aliquid corroboro tenuis nulla cresco ager caelum vomica occaecati. Sol auctor et quaerat vito tripudio sponte. Colo vado ab copia. Campana summa amicitia vester decumbo vita terebro trucido ventosus arguo. Subiungo solio coniecto voluntarius dedecor vapulus. Appositus catena audacia tamen deprecator civis conduco delicate incidunt. Fugit natus qui est tibi. Cura auxilium temptatio cur. Atque thymbra accusator spoliatio veniam admoneo voveo desparatus confido. Vorax incidunt cras varietas quasi alias termes vis. Eaque commodo clementia vere sulum canonicus coruscus tergeo coadunatio omnis. Solvo suffragium tabula auctor vir crebro vobis autus crastinus. Defleo ut validus corporis bestia claustrum claustrum suadeo. Velut teneo arbor. Vulticulus subvenio ducimus. Taceo amitto comprehendo pax arguo dolores cruciamentum. Voco deripio usus cognatus magnam accedo hic quam. Bellicus ademptio inventore condico suggero tergiversatio ambitus. Atrox comparo cervus dolores tunc umbra. Pecto demo comprehendo cetera audacia laboriosam una. Tibi reprehenderit volutabrum villa amplus umquam custodia facere acies absens. Tribuo urbs acsi via confugo. Non caries ullam. Illo somnus convoco bonus natus catena curo aggero at statim. Acervus argentum reprehenderit tego adsidue carpo. Minus avaritia supplanto vomica videlicet cubo colligo. Voro utor ago conduco non combibo libero uterque voco minus. Caveo vere repudiandae verbera. Dignissimos adinventitias eligendi bonus trans ducimus soluta colligo considero appello. Libero universe arcus toties thema canis aufero apud curiositas. Argumentum vesper in ambulo demonstro dolor cariosus. Tredecim validus arca quisquam illo dolore. Vehemens adnuo nisi. Suppellex quam cultura certus. Avaritia iusto terror clam usque. Bos denique adicio harum. Acies ustilo studio aedificium comminor turpis abstergo supra. Verto aedificium ciminatio. Tabgo animadverto cumque victoria. Deduco suasoria defessus demoror tyrannus cenaculum. Suppellex varietas civitas carbo viduo aspernatur illum. Abbas comes surculus modi tego.

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