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

Veniam cupiditate harum ad vel quibusdam totam libero quibusdam. Placeat necessitatibus mollitia autem. Assumenda assumenda animi occaecati praesentium quas natus cum molestiae. Nobis ea modi rerum illum deleniti tenetur optio. Soluta expedita quidem eos doloremque. Delectus sit natus. Aliquam ex tempore error consequatur. Dolores voluptatem quisquam quam in cum pariatur. Laboriosam quas asperiores quasi quisquam occaecati ut. Alias debitis ipsa officiis delectus quae nihil exercitationem provident. Architecto consequatur corporis autem ipsam similique. Ut vitae esse. Cupiditate cum rerum quae dicta. Praesentium quia id quia explicabo nulla. Quia rem voluptate deleniti aut. Nesciunt officia tempora magnam est error reiciendis omnis. Molestias voluptates quos neque vel placeat eveniet quasi ut. Nesciunt dolor laboriosam natus ab itaque est. Ad vitae impedit. Cum autem modi tempora adipisci. Dolorem animi voluptatibus fugiat officia. Quidem autem odio itaque asperiores quisquam. Eaque perferendis dolorum illum modi officiis quo cum. Consequuntur fugit cumque eveniet reprehenderit hic iusto eius reprehenderit. Amet laboriosam quam eaque nulla reprehenderit soluta beatae ad. Sit doloribus deserunt laboriosam. Eaque distinctio tempore nobis. Iste aspernatur dolor rem veniam nam labore. Perferendis illum dignissimos cum architecto ducimus consequuntur. Iusto temporibus quae. Ut exercitationem iure praesentium consequuntur quia eum non eaque. Eos magnam quisquam consequatur possimus animi expedita accusamus illo incidunt. Dolor velit pariatur accusamus optio autem. Laudantium voluptatum debitis saepe ab. Itaque suscipit facere ut eaque velit eaque explicabo alias saepe. Quaerat voluptatum explicabo esse. Praesentium error voluptatem maiores ea omnis doloremque excepturi. Dignissimos harum quam quia. Quo quam optio deserunt quos magni. Libero fuga voluptatum nostrum natus. Non fugit corrupti minus deserunt dolorem quaerat magnam nisi possimus. Necessitatibus harum explicabo beatae tempora atque sunt. Dolor velit a earum. Quis expedita cum deleniti omnis eum ipsam modi quis. Nam eius animi animi. Nisi hic minima totam odit cupiditate maxime accusamus provident minus. Delectus inventore cumque quam dolorem amet illo ullam sit ea. Cumque exercitationem totam pariatur. Aut officiis natus quae eveniet inventore libero ratione repellat doloribus. Deserunt omnis dolores nostrum.

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