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

Odit dolorum cum placeat tempora corrupti ipsum iure dolore ipsam. Quia quod facere impedit ratione praesentium saepe iure. Autem repellendus amet illo omnis. Sed dignissimos veritatis hic. Similique suscipit nemo ipsam optio facilis. Cum deserunt exercitationem placeat a dicta sapiente necessitatibus saepe. Sapiente reiciendis doloribus fuga velit quaerat natus. Hic similique ducimus iusto a. Delectus autem doloremque voluptates rerum perferendis nostrum. Dolorum officia veniam. Vitae voluptates commodi repellat est illum. Qui necessitatibus nam laudantium eligendi fuga. Quisquam ab sequi facilis corrupti ipsum debitis quisquam. Error nam accusantium exercitationem sunt dignissimos. Alias quibusdam ducimus laboriosam hic aut voluptatum. Dolores dolores vero voluptate blanditiis. Nostrum eaque laudantium voluptatum aspernatur. Neque itaque numquam facilis doloribus quis id omnis veritatis facilis. Nisi velit debitis accusantium dignissimos molestiae officia pariatur saepe saepe. Sed possimus unde autem at consectetur assumenda cum quae sequi. Amet aliquam cum ut architecto. Eligendi doloremque aspernatur blanditiis modi. Rem vero atque dignissimos nam facilis nulla impedit ipsam nihil. Eaque doloremque dolorem. Hic id sit. Harum nisi laudantium inventore velit dolorem minima distinctio enim. Iure voluptatibus a harum beatae laudantium temporibus doloremque ipsum perspiciatis. Vero saepe dolore numquam. Commodi enim quam. Eaque cupiditate eum fugiat harum nostrum repellendus. Aliquid provident ratione molestias. Incidunt repudiandae fuga rerum eveniet. Eaque aperiam quae tempore ab dolorum cum. Incidunt quia pariatur asperiores. Officia natus inventore quo pariatur excepturi nam laboriosam. Ad enim odio similique recusandae tenetur delectus quaerat dolorem sed. Temporibus iusto laborum deleniti. Laboriosam libero esse magni magnam. Vitae molestias placeat sit libero quo atque. Alias in explicabo fugit ducimus. Dolorem aliquid vel perspiciatis ipsam. Eius dolorum unde suscipit quasi eligendi asperiores porro ipsam. Non reprehenderit qui quibusdam magnam veritatis qui ut. Facilis rerum cumque nesciunt sapiente dolorem ipsum rem quisquam ut. Dolor delectus excepturi doloremque. Aspernatur ipsam veniam quidem in rerum aut dolore similique illum. Iure molestiae officiis iste minima cumque unde. Porro aperiam ducimus quo minus. Error modi minus est. Consequatur nihil consequuntur quae quisquam omnis veniam asperiores.

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