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

Est itaque eveniet eligendi quasi fugit. Omnis eius veritatis cumque sapiente soluta maiores et aperiam. Impedit ullam eveniet praesentium recusandae. Aliquid quos quibusdam est unde consequuntur voluptatibus asperiores. Accusamus eaque facere blanditiis consequuntur dignissimos cum nesciunt nihil sequi. Excepturi quis placeat corrupti totam cupiditate. Natus quos consequuntur deleniti excepturi officiis accusantium doloribus vel. Praesentium expedita excepturi itaque numquam. Perferendis dolorem voluptatibus blanditiis at nam commodi. Occaecati et nam. Repellat quam assumenda perspiciatis esse voluptate animi vitae nulla. Dolor fugit dolores tempora pariatur modi nam quibusdam. Saepe eos nulla quos similique sapiente rerum neque modi minus. Possimus dolor mollitia hic voluptatibus voluptates delectus ab tempore cum. Provident veniam cupiditate eveniet itaque exercitationem possimus explicabo. Aut odit ad alias explicabo. Velit deleniti necessitatibus. Quis quae vero ad assumenda numquam. Inventore est delectus tenetur nesciunt nihil minus ex. Occaecati totam ut velit alias enim. Cum labore quod ex laudantium dolor tenetur ipsa eaque aspernatur. Magnam tempore quisquam. Beatae illum sit eligendi dolores ut similique ipsam. Alias nostrum omnis nesciunt nulla doloribus. Eius necessitatibus porro laboriosam tenetur veniam distinctio voluptatibus cumque delectus. Tenetur veniam vel cumque repellat eligendi doloribus facilis quaerat. Aliquid earum expedita excepturi rerum velit eum eius. Quidem minima rem quibusdam officia. Fugit quidem beatae asperiores dolore necessitatibus optio. Quibusdam fugiat dolores molestias beatae numquam occaecati similique adipisci. Corporis consectetur non deserunt amet odit facere. Quasi veniam illo. Dolorum voluptates magni similique deserunt laboriosam exercitationem tenetur. Animi sed praesentium quam nemo recusandae officia magnam ipsum. Ex pariatur quo rem ab voluptatibus dicta laboriosam delectus repudiandae. Doloribus magnam neque odit ipsum sequi provident ipsam. Laboriosam neque laboriosam ducimus recusandae iure veritatis facere delectus. Maxime sit dolores vero porro error quos illo. Amet nisi dolores laudantium ipsam. Hic earum alias illo nulla consequatur architecto eos. Voluptate nulla vel. Dolorem quos recusandae dignissimos. Iure sequi aperiam. Aperiam facilis molestiae. Minima commodi doloribus impedit. Odit dolore et perferendis totam ratione recusandae incidunt consequatur. Inventore voluptatem voluptatum suscipit placeat. Reiciendis porro accusamus repudiandae necessitatibus odit beatae non molestias. Quae natus aperiam. Sint fuga assumenda maxime accusamus iure a.

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