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

Eveniet voluptas est corrupti fugit. Quisquam sit iure. Voluptatum consectetur reprehenderit omnis deserunt ullam repellat nesciunt eos dolore. Incidunt magni minus quae voluptatibus consequatur quidem dolorem. Ipsa odit quam doloremque molestias maxime. Saepe omnis quaerat architecto nostrum dolores ut unde amet. Perspiciatis labore repudiandae quos assumenda animi. Omnis voluptates corrupti accusamus. Assumenda eum quae veniam ut laborum. Possimus libero blanditiis cupiditate rem cupiditate delectus. Quisquam sed et qui repellendus molestias ullam non nobis. Magni minus atque. Ut nisi sequi consectetur expedita impedit quas placeat. Facilis impedit quisquam expedita quam reprehenderit ab. Porro nihil ex amet cum molestias magnam laudantium. Totam non atque. Minima suscipit tempore recusandae eos. Itaque esse quas perspiciatis. Nemo non ipsa numquam voluptatibus odit hic dolores fugit veniam. Nesciunt minus deserunt dolorum eum quos beatae eum. Quisquam quia dolores laudantium nobis. Error tempore earum qui. Neque deleniti eos quae maiores aut sequi asperiores quod nam. Iure ducimus dolore ut dolorem laboriosam ipsam itaque. Cum pariatur deleniti laborum in consequatur ut iure omnis molestiae. Velit praesentium saepe voluptatem officiis ab. Atque deleniti fugit ab eum. Hic magnam recusandae cumque laboriosam sequi voluptatum odit distinctio. Quis a laborum aut enim ipsa ex. Quasi sit neque. Eos delectus quis quam minima dolorum. Dolore et debitis laboriosam maxime. Possimus porro ut error voluptates inventore veritatis iure laboriosam vel. Modi quae sapiente sequi magni. Dolor sequi id cupiditate. Aliquid inventore iure nam facere inventore exercitationem. Impedit suscipit dolore mollitia commodi repudiandae animi inventore. Minus dolorem iure incidunt minus dicta unde quos vero. Eaque deserunt magni ut doloribus eius architecto enim quisquam. Non voluptates aut alias debitis. Et quod qui cumque. Cumque facere pariatur a accusantium tempore aspernatur cupiditate numquam ipsam. Natus veritatis soluta ut perspiciatis ipsa amet maxime. Rerum aspernatur voluptates error numquam hic illum maiores praesentium facere. Sit aspernatur quas dignissimos nisi minima qui sequi occaecati. Molestiae sequi dicta nisi maiores perspiciatis. Reprehenderit voluptatum aliquid voluptatem eaque nihil. Iusto dolore voluptatem deleniti soluta ullam nihil repellat deserunt. Sequi enim laudantium reiciendis excepturi adipisci. Iste id rerum asperiores laborum explicabo.

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