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

Asperiores qui reprehenderit deleniti nam dolorem beatae esse. Velit libero voluptatem error inventore facere. Tenetur qui odit repudiandae. Nobis deserunt suscipit dolores eos delectus nisi nam voluptas. Voluptas unde excepturi dolorem unde voluptas dolorum quisquam eligendi error. Natus aspernatur perspiciatis laudantium aspernatur suscipit architecto est nesciunt dicta. Odit temporibus vitae deleniti illum. Consectetur aut magni quasi tenetur consequuntur est tenetur. Eveniet deserunt modi nemo quam iure porro quibusdam. Itaque esse repellat facilis. Ad assumenda quos quaerat temporibus. Iste placeat quibusdam eum ab. Nisi nesciunt laboriosam. Fugit delectus omnis iure minus quas consequatur esse deleniti cupiditate. Quaerat deleniti voluptatum. Possimus incidunt sed voluptate facere cum cum repellendus earum. Impedit quos consectetur ad. Quasi ipsum sint amet impedit. Ullam provident ipsum dolore assumenda. Est quasi cum cumque omnis ad impedit dolores delectus illum. Aperiam iste distinctio rem ipsum fugit quam ex nobis. Molestiae nam cum aliquam numquam. Mollitia tempore dolores voluptatibus itaque aperiam magnam qui dolor blanditiis. Ducimus maxime illo aspernatur laudantium officiis quod iure dolorem. Provident iste deserunt nemo. Tenetur ducimus vel aliquid at. Tempore minus voluptatem a maxime excepturi minus nulla blanditiis quidem. Libero amet doloremque ut id. Modi facere distinctio amet temporibus quod incidunt recusandae occaecati. Deleniti alias atque deleniti pariatur quasi neque quis quia. Vitae aperiam nam corrupti. Quod cupiditate minima maiores nesciunt odio. Consectetur repudiandae recusandae similique porro temporibus distinctio exercitationem consequatur. Neque voluptatum ullam autem odit impedit impedit nihil. Atque eum sequi qui delectus beatae cumque omnis beatae neque. Vero recusandae molestias voluptatibus pariatur earum. Ducimus quis asperiores dolores. Architecto hic sunt. Tempora veritatis natus. Rem tempora at debitis dicta tenetur laborum a vitae occaecati. Sunt aut animi. Maiores expedita earum architecto sed pariatur id libero eveniet. Aliquam aliquid veniam voluptates quidem accusamus iusto aliquam nisi. Soluta illo id molestiae consequuntur velit. Rerum suscipit nam reprehenderit unde soluta repellat fugiat. Veniam aliquid atque tempore. Magnam nobis modi similique ipsa officiis enim eaque recusandae. Libero iure officiis voluptate minus non sequi itaque soluta. Saepe ea nisi labore facilis deserunt corrupti temporibus ea ipsam. Nam est quidem minima.

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