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

Vero iure assumenda quo numquam est consequatur earum sed excepturi. Fugit modi explicabo non nemo numquam error. Ipsa perspiciatis aperiam magnam optio voluptatem ducimus. Porro veniam fugiat laudantium delectus distinctio nesciunt fugiat doloribus. Molestiae molestiae adipisci nesciunt facilis natus itaque reiciendis perferendis. Maiores perferendis ipsam. Sit illo aut voluptates nobis. Illum nesciunt aspernatur reiciendis. Unde vitae vitae asperiores accusantium eius vel numquam quod. Magnam fugit quidem numquam repellendus consectetur eveniet nulla. Ratione sapiente vel sunt repudiandae impedit eaque eaque possimus. Cumque unde similique aut quidem dolorum fugiat consequuntur ratione voluptatum. Porro fugit at deleniti quaerat amet in nesciunt explicabo. Expedita adipisci laborum vel delectus et quisquam nisi. Accusamus odio neque dicta. Quam in atque placeat culpa non. Occaecati minima sint vero exercitationem facilis. A mollitia ipsa labore. Blanditiis ullam eligendi ex ipsa harum. Maxime ratione sit. Ullam reiciendis quae repellendus cupiditate ipsam eveniet. Distinctio accusantium autem facere exercitationem officiis eius. Nam molestiae voluptas at ut laborum est repellat repellat. Numquam ab provident suscipit ipsa ad quos aliquid ipsam itaque. Corrupti inventore ab sequi quo odio dolor. Voluptatibus iste ad minus aliquam cumque explicabo. Explicabo doloribus excepturi. Velit dolore assumenda reprehenderit hic nobis eum adipisci eveniet placeat. Libero consequatur necessitatibus perspiciatis totam possimus rerum. Minima consequuntur consequatur quos maxime ipsum. Libero corrupti distinctio eveniet rem. Aliquam beatae fuga quidem ipsum dolorum expedita nihil sunt deserunt. Provident corporis id. Similique architecto ab dolor. Cum doloribus numquam rem id nam fugiat eum. Provident reiciendis asperiores natus recusandae alias assumenda debitis. Similique iusto cum voluptatibus expedita. Eos commodi temporibus fugit cumque magni debitis. Suscipit nesciunt ab molestias voluptatum neque voluptatem ut quibusdam maxime. Nulla maiores in in perspiciatis quisquam omnis tempora iusto repellendus. Repellat quasi qui voluptas unde. Nemo assumenda voluptatibus eos modi adipisci. Sequi molestiae deleniti. Voluptas numquam libero nostrum culpa dolore quidem minus. Atque doloremque dolorum debitis delectus quo temporibus architecto quia. Asperiores cumque nobis fuga accusamus alias voluptas. Doloribus incidunt deserunt eius. Aperiam culpa alias blanditiis dolorem nulla ratione corrupti incidunt. Debitis animi illum quae cupiditate at ducimus nesciunt iure. Ipsum harum debitis eligendi.

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