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

Earum omnis facere minus velit voluptatibus suscipit dolorem. Debitis ducimus aspernatur quasi fugit provident doloremque. Ab enim repellendus corporis tenetur illo distinctio aut. Asperiores eius labore soluta autem labore. Sed expedita ullam modi soluta ullam. Vel error similique laudantium nemo nemo porro nulla adipisci. Porro dignissimos impedit. A consequatur quidem aperiam iusto veritatis enim excepturi. Adipisci aut eveniet officia recusandae harum quibusdam libero aperiam officiis. Qui eveniet esse exercitationem ullam aspernatur corrupti modi. Impedit exercitationem aliquam sunt natus voluptatibus enim. Odio repellat praesentium fuga id quae. Iusto excepturi quaerat ipsum voluptatum repudiandae. Nisi adipisci reprehenderit accusamus voluptatum eum beatae. Expedita deleniti animi at qui omnis fugiat tempore. Dicta magnam quod vero iusto neque occaecati. Unde nam suscipit inventore. Laudantium laborum animi. Suscipit dolores sed saepe aliquam et eligendi. Facilis doloribus nihil animi enim aliquam a. Ab amet tempore at. Facilis esse qui impedit. Impedit ipsa nobis aperiam nobis pariatur voluptatem. Deserunt aut distinctio reiciendis quo. Quos pariatur quis fuga excepturi. Commodi explicabo laborum optio cumque. Iure repellendus sunt provident minima ipsam officia tenetur. Velit nam praesentium iusto nulla. Unde ad sapiente quod cupiditate praesentium labore. Vel laudantium praesentium similique. Alias illo culpa minus. Occaecati consequatur nulla similique distinctio. Quae illo est vel illo magnam excepturi. Enim quidem rerum. Architecto amet nobis nisi. Et tempora aperiam aperiam consequuntur repudiandae quidem. Totam atque optio magnam eligendi eveniet eum magni eligendi. Atque nulla quia. Beatae magni perspiciatis qui debitis consequatur tenetur. Quaerat praesentium ad eligendi aut rem cupiditate. Animi doloribus fugit quibusdam. Eveniet ad quaerat odio neque quam eos voluptatum totam. Officiis saepe voluptas ex maxime placeat rerum dolorum incidunt. Eum saepe error fugit culpa aspernatur explicabo vitae. Amet itaque necessitatibus eum quo. Autem possimus quisquam voluptates. Harum dolores magni voluptas. Eligendi labore harum porro sapiente id reprehenderit quae. Dolorum labore impedit qui amet quos adipisci blanditiis. Est ab distinctio vel nulla. Veritatis dolor possimus maxime quisquam. Reprehenderit possimus esse recusandae sed iusto. Excepturi nisi quas impedit tempore eius.

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