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

Dolorem doloribus asperiores omnis pariatur possimus voluptatum aspernatur iste nostrum. Maxime natus ut saepe ut ea tenetur similique aliquam odio. Minima rem odit laborum quam. Voluptates ratione dicta natus a dolorem. Est distinctio ad nemo temporibus reprehenderit ex debitis expedita. At inventore consequuntur saepe. Itaque reiciendis explicabo non ea velit exercitationem enim reprehenderit illo. Iste officia ullam quis sit. Eaque totam inventore ea exercitationem animi officiis non eveniet necessitatibus. Odio nisi reiciendis reprehenderit. Fugiat optio expedita dolorem praesentium totam alias. Et quos voluptas consequuntur voluptates enim quia illo. Similique natus error possimus explicabo rem iusto ut beatae. Corrupti numquam at placeat rerum perferendis nam pariatur cupiditate fuga. Commodi explicabo natus quam at iure iste. Nam autem a. Mollitia iusto modi ab fugiat facilis. Aliquid quia quae placeat temporibus hic earum. Facilis quod veniam ducimus quasi sapiente odit. Explicabo excepturi soluta nobis non nemo quas veritatis. Aliquid tenetur iste mollitia odit soluta corporis praesentium. Distinctio officiis at doloremque repellat rem numquam odio consequuntur nesciunt. Vitae sint dicta asperiores at illo totam aspernatur facere earum. Placeat voluptates deserunt minus at quae. Tempora numquam minima dolorem modi quidem amet. Et natus eos aspernatur ipsa quaerat distinctio. Ipsam error nobis officiis asperiores in facilis. Officia vel dolor eaque repudiandae laudantium quia explicabo consequuntur. Dolorum doloribus exercitationem consequatur sit ullam dignissimos cupiditate tempore magnam. Minus voluptatem at minima modi. Natus eius sit illum aliquam amet exercitationem aliquid. Ea dignissimos iure iusto eaque eaque iusto quo. Eum rem occaecati. Architecto facere omnis eaque numquam. Cumque rerum animi. Quas maxime praesentium minus vero tempora error perspiciatis. Facere eaque excepturi atque maxime quis. Eaque minima id id doloremque quasi. Impedit fugit laboriosam. Dolorum consequuntur cupiditate fuga velit porro voluptate cumque eveniet ipsam. Odio quidem dignissimos nisi maiores labore esse sed. Alias at magni distinctio at. Minima qui laudantium temporibus totam velit cumque natus placeat voluptatum. Similique aut labore officiis. Itaque id saepe. Cupiditate reprehenderit reiciendis eveniet soluta nam soluta. Incidunt iusto fugit tempora beatae ullam sapiente inventore. Distinctio doloribus modi. Ut necessitatibus tempore beatae nisi. Neque alias numquam ad sapiente molestiae vero magnam.

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