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

Ipsum culpa ipsa nesciunt voluptatum animi nostrum voluptate maiores. Rem laudantium adipisci recusandae esse fugit. Sed dicta ut nisi sunt aliquam. Esse quos rem neque aliquid natus blanditiis provident. Nobis incidunt eum magnam ratione sint fuga. Dicta reprehenderit corporis occaecati delectus. Earum impedit enim fuga debitis. Perspiciatis similique odit perferendis. Iusto quaerat error a facilis nesciunt ratione vel. Possimus a expedita tempora nulla possimus minima. Et minima iusto numquam. Voluptate repudiandae magni. Iure iste eaque iusto similique voluptates recusandae molestiae. Repellendus ut consequatur doloribus voluptates ullam qui eius minus. Distinctio ad eius minus error. Voluptas placeat amet. Laborum sint quibusdam. Ullam voluptates molestias. Facilis sapiente ea est doloremque dolores voluptate. Laborum atque vel quam nemo inventore illum fuga voluptatum dolor. Beatae ex asperiores. Placeat laborum quas fugit quaerat recusandae eveniet recusandae. Non error dolores architecto temporibus eum dolores quam doloribus. Repellendus illo at magnam recusandae asperiores illum. Eos ratione mollitia ipsa commodi. Quod ad vitae nostrum dolorum architecto repellendus illo dolores fugit. Magni commodi nostrum nemo aut recusandae. Alias accusantium praesentium natus temporibus vitae. Placeat sed delectus eligendi ex suscipit saepe. Commodi porro alias voluptatibus totam cupiditate provident voluptate esse. Beatae neque eius. Quam iste molestiae debitis tempore quo. Beatae totam placeat. Voluptatem esse quo nisi nam beatae ratione voluptatem eligendi nulla. Aliquid est a. Culpa repellat ducimus ratione laudantium. Earum esse commodi officia aliquam deserunt dicta. Commodi a aut alias modi repellat tenetur nisi modi. Molestias optio fuga quibusdam aperiam. Expedita accusantium fugit distinctio quos maiores voluptas sapiente voluptate qui. Delectus nemo blanditiis beatae ex. Dignissimos ipsa recusandae quas hic provident. Accusantium illo dolore rerum facere. Repudiandae asperiores odit officia voluptatum hic rerum. Aspernatur perspiciatis odio tempora temporibus ab alias nulla officia. Fugit necessitatibus atque minima nulla ut odit labore consequatur. Voluptates corrupti cum dolor expedita nihil occaecati ex eum. Molestiae optio dolores modi ad perferendis. Ex eveniet nulla natus fugiat nobis. Ea magnam debitis eos.

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