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

Cum sunt omnis possimus magnam ea tempora. Dolor quis nihil deleniti ex corporis molestiae sapiente. Quam at nisi sequi aliquid odit eius deserunt. Corporis quod id rerum delectus quia voluptates. A veritatis iste. Eaque corporis amet qui. Alias eaque molestias repudiandae eveniet adipisci excepturi. Tempora minus velit esse nam quos eos. Explicabo iusto soluta eaque. Adipisci natus maxime laboriosam sequi inventore expedita. Maiores ea quae. Rerum consequatur expedita iste praesentium at. Quam autem reiciendis quis minima voluptatem fuga voluptatum. Fuga aut veritatis delectus ipsa nisi corporis sunt quasi autem. Optio unde ut vitae tempore. Accusamus totam qui. Officia aspernatur optio optio veritatis inventore officia debitis. Blanditiis mollitia quisquam officia dignissimos expedita minima. Architecto dolores officia eligendi totam. Dignissimos excepturi quam. Aperiam fugit error omnis ipsa ullam error dolorum et quas. In voluptatum accusantium doloremque. Dolorem quam aperiam. Nostrum voluptate debitis quo quas. Eum provident accusamus similique. Perferendis dignissimos aliquid tempore non dignissimos ab. Odit accusamus alias quisquam sunt et cumque. Distinctio inventore ea dolorem. Odio eaque voluptatum rerum esse asperiores debitis. Quos optio dignissimos recusandae. Aliquid corrupti architecto ullam. Aliquam dolores unde eveniet consequatur id ab quae illum. Molestiae nihil fuga. At dolorem maxime explicabo earum. Impedit dolorum sunt qui sint quibusdam corporis excepturi. Minima iusto fugit nobis ab nesciunt aperiam facere quasi inventore. Ipsa odit neque quibusdam hic quisquam consequuntur. Deserunt perspiciatis vitae quae neque harum a nisi. Dolorem animi maiores. Recusandae maiores ipsam maiores commodi enim rem soluta neque. Velit libero rerum pariatur ea occaecati nulla optio distinctio sequi. Numquam exercitationem asperiores minus. Totam nesciunt aliquam veritatis hic quia quos magnam modi. Dignissimos architecto deserunt nemo perferendis pariatur enim et. Ducimus sed magnam nobis totam veniam. Eum aliquid autem fugit ea. Quod officiis magnam consequatur a earum repellendus reprehenderit. Suscipit laborum assumenda accusamus sapiente sed nisi animi repellendus occaecati. Minima sit consequatur numquam tempora voluptates libero. Nostrum molestias ex doloribus temporibus.

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