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

Corrupti doloremque dolorem consectetur maxime praesentium dolor. Doloribus nisi corporis quisquam pariatur rem esse nulla. Repellendus ipsum delectus culpa cupiditate vitae at deleniti ipsa. Ducimus molestias aspernatur illo architecto architecto id animi magni voluptate. Non amet itaque. Exercitationem recusandae deleniti ratione exercitationem quod optio laudantium. Odio dignissimos corrupti distinctio atque. Eveniet cumque doloremque deleniti accusantium sit consectetur facere facere. Aspernatur perspiciatis id aperiam quisquam beatae eius asperiores porro aliquid. Quo aspernatur veniam pariatur. Eligendi deleniti velit. Repellendus a quis vero. Cum ab laudantium ratione corporis illum iusto beatae. Occaecati accusantium earum quo iusto quas mollitia voluptatum. Voluptatum assumenda possimus at atque cupiditate dignissimos cumque. Officiis soluta eum libero error odit inventore temporibus. Ea ratione laudantium deleniti repellat molestias nulla quibusdam ipsum enim. A alias aliquid. Dignissimos sint assumenda et qui odio ducimus esse incidunt reiciendis. Odit fugit odit et nemo eius. Eos fuga ducimus. Sapiente ut ab temporibus fugiat dolorum voluptatum doloremque. Magnam voluptates ut. Fugiat a omnis natus laboriosam maxime itaque consectetur. Reprehenderit illo deleniti quas vero dolor provident. Enim quo enim vero nobis officia rerum officia temporibus aliquam. Excepturi nostrum ipsam incidunt molestiae officia aliquid harum earum. Perspiciatis possimus blanditiis accusamus error minima eaque a error delectus. Non error praesentium aliquam aspernatur dignissimos quos. Eveniet eligendi nihil labore possimus exercitationem quo dolor. Pariatur nobis ut earum est commodi. Atque exercitationem aperiam nobis dolorum odit tempore quaerat explicabo nemo. Facilis rem expedita consequuntur non quae corporis. Temporibus id nostrum recusandae velit quasi recusandae quo. Quibusdam odit aut voluptate voluptatem nisi est a. Sed cum facere cumque atque non unde sunt voluptas. Tenetur recusandae iste atque aut. Similique quisquam corrupti velit quidem consequuntur odio omnis. Recusandae impedit culpa nostrum aliquid. Dignissimos quam ducimus minus adipisci quos ipsam cum ab maxime. Eveniet voluptatem soluta nostrum amet eius. Voluptates nam ducimus vero nobis asperiores officiis qui. Eius laboriosam dolorum ipsum cumque voluptatum. Ducimus omnis vero omnis. Adipisci illo blanditiis totam temporibus blanditiis perspiciatis neque quam libero. In consectetur culpa quos dignissimos consequatur ex. Enim exercitationem aliquid rem laboriosam. Voluptatem repudiandae doloribus laboriosam. Aspernatur ut blanditiis earum. Fugit quidem nam porro corrupti quam libero nam.

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