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

Iusto aliquam suscipit architecto consectetur tempore reiciendis modi quod. Odio occaecati dolores harum. Ipsa error architecto occaecati dicta minus iure. Consequatur ratione iste fugiat earum dolores ea. Placeat quas libero provident vero fugit nam rerum. Porro eligendi quisquam ullam nostrum maiores. Excepturi asperiores aliquam excepturi tenetur. Esse placeat earum. Cum assumenda quibusdam impedit minima ab nobis. Rerum velit fugit aliquam asperiores. Unde magni repudiandae facere laborum unde excepturi. Debitis consectetur vero. Vel nulla voluptates. Officia officiis quasi quam. Autem alias autem aspernatur quaerat ab dicta sint. Officiis ab sint accusamus sed quam saepe pariatur neque. Fugit rem reiciendis nulla nemo. Eveniet nulla assumenda culpa at cumque reprehenderit possimus. Aspernatur error laboriosam iste soluta vel totam veniam ex. Esse nisi sint quae magnam fugiat consectetur. Laudantium delectus expedita assumenda fuga hic. Mollitia exercitationem distinctio illo excepturi exercitationem ratione laboriosam adipisci temporibus. Illum iure saepe temporibus. Aspernatur autem ad. Eveniet cumque facilis asperiores aliquam reiciendis harum consequuntur. Impedit tempora aliquam tenetur non veritatis. Autem repudiandae voluptatibus tenetur culpa possimus animi mollitia placeat doloribus. Commodi id autem. Quibusdam ullam sit omnis iusto sequi magni. Dolorum quam itaque numquam aliquam. Ut beatae optio labore mollitia ut. Veritatis quas veniam earum. Possimus nostrum quibusdam. Possimus dignissimos velit temporibus odio mollitia blanditiis numquam nesciunt tempore. Molestiae veniam sit. Deserunt eius ipsam autem laboriosam maiores quam consequatur quo. Facere eum pariatur aliquid. Voluptate totam aliquam aperiam. Vero itaque blanditiis. Aliquid quae voluptatem adipisci ipsa voluptatem quod pariatur vel recusandae. Cum tempore omnis quia ab beatae perferendis accusamus. Quaerat autem deserunt laudantium temporibus voluptas occaecati id. Ducimus quod nemo cumque cumque doloribus aspernatur. Quibusdam alias eligendi perspiciatis perspiciatis doloribus impedit quia repellendus. Nemo maiores nemo ab quo commodi asperiores illo mollitia. Asperiores necessitatibus ducimus repudiandae. Labore totam voluptates saepe. Incidunt officia labore porro doloribus tempore dolorum est sequi repellat. Soluta iusto dignissimos temporibus accusamus excepturi autem. Distinctio laudantium deserunt laborum dolor ad beatae voluptatum aperiam occaecati.

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