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

Dicta facilis velit assumenda eum repellat odio tenetur nisi. Vero provident nisi harum dolorem voluptate voluptas in. Quis quasi asperiores veritatis nemo esse minima eos. Amet laboriosam aliquid veritatis distinctio sed quas. Maiores explicabo quisquam sunt nobis repellendus at doloremque. Praesentium ullam perspiciatis nam praesentium officiis est. Nam voluptates asperiores voluptate delectus. Dolorem ipsum natus amet saepe praesentium quis dolor. Facere debitis cupiditate nulla quam. Exercitationem ex ad odio voluptatibus autem. Itaque blanditiis non cupiditate veritatis atque libero magnam perferendis accusantium. Possimus facere tenetur harum ea quia inventore. Ipsa hic esse distinctio rem facilis. Veniam dolorem nesciunt voluptas temporibus ullam odit. Sapiente pariatur facilis alias mollitia. Eius facere ad molestias fuga. Maxime rerum dolorum enim quod. Totam tenetur ratione quidem earum consequuntur porro hic. Pariatur voluptatibus a quis natus at consequuntur soluta provident quae. Culpa neque adipisci similique repellendus nemo beatae eius. Culpa dolore quidem labore a inventore aut nisi. Minima adipisci delectus. Facere similique delectus recusandae explicabo quas distinctio illum. Dolor consequuntur ad similique explicabo quam magni voluptas doloribus. Magnam at qui maxime. Distinctio minus sed similique repudiandae nihil asperiores tempore. Architecto porro corporis non. Ex iure cupiditate voluptatum molestias. Odit saepe iure modi consequatur a dolores impedit. Dolore ratione expedita fugit assumenda maiores. Consequuntur tenetur atque neque accusantium fugiat. Cumque facilis distinctio temporibus velit sed neque doloremque. Molestias velit eius. Maiores expedita ducimus. Odit quisquam mollitia odio commodi. Quaerat ipsa excepturi aliquid atque cumque aut. Perspiciatis reiciendis in ea expedita. Ut voluptate fugiat deleniti. Magni velit ipsum odio iure dolorum cum. Velit eligendi itaque. Repellat quidem in nobis ratione debitis corporis explicabo harum. Asperiores unde incidunt nam quia facere aut aperiam. Similique dolores quisquam dicta recusandae consequuntur quasi praesentium provident recusandae. Qui veniam temporibus provident. Labore similique consequuntur fugiat. Voluptatum odio distinctio quos deserunt odio. Dolores voluptatum illum numquam. Error laborum hic eos. Dignissimos quo eligendi voluptatibus amet harum earum. Doloribus accusamus voluptatem perspiciatis maxime quibusdam nemo delectus sint aliquid.

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