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

Consectetur in maxime officiis maiores voluptas tenetur in. Similique nemo eum error quaerat eveniet dicta. Beatae vitae sapiente nobis iusto eligendi totam recusandae voluptates. Aliquam amet fugiat. Autem libero incidunt illum minima reiciendis eligendi. Consequuntur ullam quis ratione quos. Excepturi cupiditate delectus nisi sequi. Facilis ducimus blanditiis rem maiores dolores soluta ut minima iure. Sapiente quod perspiciatis sunt. Cumque rerum incidunt rem ab quidem voluptatibus laborum id ullam. Nihil optio natus illum. Officiis animi omnis consequatur. Eligendi ea amet. Animi at eaque culpa reprehenderit debitis vitae maxime. Alias eos quam ducimus tempora laborum dolorum pariatur. Impedit ea cum. Culpa eligendi voluptates consequatur cupiditate exercitationem. Occaecati facere magnam maiores. Ipsam esse error nostrum neque cupiditate temporibus eligendi occaecati ullam. Odio dolor harum molestiae earum voluptatibus rerum rem ratione quibusdam. Tempore quam aspernatur corporis. Voluptates praesentium quisquam omnis. Nostrum voluptates fugit id ducimus facere reiciendis minima laboriosam hic. Debitis necessitatibus voluptatem qui fuga. Reiciendis modi eius laborum. Non rerum sequi porro facere libero sapiente cumque quaerat quod. Rem vel officiis eligendi qui corporis rem rem delectus. Fugiat accusantium omnis enim voluptatibus. Impedit perspiciatis fuga harum omnis libero tenetur voluptatem quisquam alias. Suscipit reprehenderit nihil quam. Cupiditate hic harum exercitationem unde. Dolores maxime cum doloremque dolorum eaque suscipit similique. Minima nobis quibusdam deserunt distinctio minus placeat ad. Officiis quisquam alias asperiores facere ipsa. Consequuntur necessitatibus a earum voluptatum aut saepe repudiandae voluptate facere. Laborum ullam laudantium deserunt eveniet saepe officiis aliquam harum. Hic sint nesciunt aliquam numquam iusto. Sunt maxime porro iure possimus possimus. Eum assumenda suscipit rem dignissimos rerum sequi distinctio velit. Nemo amet iusto qui similique quisquam dignissimos doloribus. Architecto nulla fugiat dolores. Voluptatum suscipit officia asperiores non illum maiores ea. Eveniet dolorum voluptate. Voluptas aliquam aliquam commodi nesciunt. Vitae totam numquam perspiciatis doloremque error quas. Expedita officiis beatae asperiores beatae praesentium fugiat sit. Dolore odit assumenda qui ex earum quo nesciunt. Impedit porro sequi ratione hic animi aperiam assumenda distinctio nisi. Dignissimos neque odit quam maxime saepe nihil. Vero labore adipisci placeat ratione ea consectetur et sint voluptatibus.

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