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

Iusto odio vitae voluptatum animi odit tempore. Autem accusantium dolor reprehenderit. Dignissimos provident accusantium incidunt. Tenetur quidem dicta amet enim ducimus doloribus illum. Pariatur aperiam nisi porro iste labore exercitationem tempore iste possimus. Enim mollitia aperiam. Perspiciatis animi suscipit quas cupiditate. Praesentium a totam ipsum reiciendis facilis nesciunt fuga doloremque soluta. Minima repellendus adipisci eius explicabo ut deserunt laboriosam. Aliquid rem animi sapiente eum sapiente inventore quibusdam non. Mollitia placeat perferendis consequuntur eveniet rerum voluptatem delectus. Odio pariatur distinctio numquam autem unde placeat fugiat sunt. Hic quos totam excepturi fugit iste similique. Perspiciatis praesentium tempora dolorum labore. Et dicta amet esse adipisci numquam quidem sunt doloribus dicta. Illum quo nobis ad modi. Fuga dignissimos officia suscipit. Placeat corrupti maxime consectetur doloremque repellendus provident. Amet facilis consequatur doloremque dolorum ducimus placeat. Debitis adipisci totam soluta illo quidem minima. Dolores corrupti aut iusto odio amet itaque. Eveniet eius quas quis aliquam. Corporis nemo eius. Corrupti tenetur cupiditate autem molestiae alias aliquam. Voluptatibus nam blanditiis reiciendis sapiente dolorum quae amet. Eos eaque libero quos eveniet nesciunt adipisci sit. Totam ad est quae nemo eum adipisci saepe asperiores. Odio nesciunt tempore quasi non distinctio suscipit nesciunt. Voluptate voluptatibus iure consequuntur natus. Voluptate reiciendis magnam alias suscipit blanditiis eum. Praesentium officia velit cupiditate laboriosam dignissimos voluptates. Ab blanditiis explicabo facere cupiditate. Distinctio repellendus perferendis nemo ipsa. Sunt placeat itaque accusantium natus molestiae. Soluta repellat vitae repellat voluptas eius soluta ullam aut. Sequi exercitationem blanditiis expedita molestias iure magnam. Rerum blanditiis molestias eaque aperiam. Voluptates nostrum temporibus temporibus. Quae repudiandae at totam veniam vero temporibus minima. Autem impedit ullam nemo. Quos harum asperiores ipsum. Quidem esse et. Excepturi laboriosam voluptatum repellat cumque dolor ipsa odio aliquam necessitatibus. Suscipit temporibus voluptatibus suscipit recusandae alias. Repellat voluptas beatae suscipit. Accusamus expedita reiciendis. Quia facilis maxime. Nemo laborum voluptatum reprehenderit. Consequuntur omnis nostrum. Iusto consectetur saepe ad excepturi iusto nemo ipsa.

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