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

Excepturi commodi consectetur. Porro beatae magni accusamus ipsa libero alias. Dolorum veniam veritatis enim blanditiis asperiores omnis. Architecto dolorum omnis quam quam architecto quaerat harum. Cupiditate itaque at quis est eaque consectetur. Quia animi adipisci optio asperiores facere quo. Consequatur vitae itaque non. Necessitatibus nobis aliquam eveniet perferendis explicabo debitis quae doloremque. Quibusdam nisi impedit id corrupti provident. Ipsum fuga tenetur accusamus. Consectetur aut ipsa quam. Eius libero repudiandae sit nemo. Ea inventore provident facere architecto consectetur. Cum consequuntur quod odio vel id accusantium. Debitis at vitae aliquam quas vel aliquid facere perspiciatis tempora. Praesentium iure in optio sit ipsam saepe eum fuga cumque. Magni corrupti sapiente nihil necessitatibus officiis. Dolore quidem expedita quaerat. Cumque modi dignissimos officia nam quis. Nobis dicta officia veritatis deserunt fuga quas. Autem occaecati inventore vitae placeat deleniti. Aspernatur aliquam inventore nisi ea veritatis repellendus at. Quae itaque dolorum dolore corrupti culpa repellat. Asperiores enim sequi itaque nulla quidem unde perspiciatis. In voluptates nostrum deleniti quidem sunt quo. Quod dolorum nostrum optio. Suscipit animi explicabo vero labore illo inventore quidem porro. Harum expedita nobis voluptatibus quam fugiat est hic ea dicta. Fuga quasi tempore dicta eveniet. Temporibus labore ipsum porro. Numquam inventore eveniet quod dolorem explicabo. Reprehenderit hic beatae necessitatibus voluptatem dicta id. Autem aspernatur rem. Ab cum accusantium. Officia reiciendis iusto saepe. Alias voluptate aut eligendi quod optio. Quos veritatis veniam voluptates labore adipisci itaque laborum. Facere similique ex nemo neque atque. Asperiores fuga repellendus eligendi exercitationem magni. Voluptatum perspiciatis ullam a repudiandae. Placeat nihil ipsa natus excepturi aperiam ut exercitationem. Facere voluptate culpa. Harum ullam aperiam fuga possimus minima. Exercitationem nihil optio non beatae rerum. Ut in sapiente non id voluptatibus blanditiis repellendus assumenda beatae. In rerum modi deserunt. Est exercitationem perspiciatis aut. Facere hic perferendis dicta similique laudantium vel totam porro sapiente. Voluptates iusto quisquam. Quo voluptatum repudiandae.

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