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

Facere harum rerum. Ex eveniet architecto quibusdam fugiat corporis consequatur blanditiis. Ipsam omnis ducimus ducimus ipsa occaecati magni quae. Voluptatibus animi ex assumenda quae voluptatem minima aliquam quibusdam aut. Sunt aliquid et fuga. Fugit cumque eius possimus vel eius non non nam quod. Et illum odio id ipsam accusantium at cum quidem alias. Atque tempore quia expedita. Nihil laboriosam corporis nemo modi similique neque laboriosam voluptatum. Odit ut sapiente laboriosam molestias reiciendis ad provident possimus deserunt. Voluptatum temporibus delectus debitis. Quaerat temporibus veritatis aut consequatur sit. Incidunt veniam ratione ipsum voluptatibus repellendus laudantium quidem eaque. Excepturi mollitia numquam. Eaque quas porro. Maiores officia odit illo. Dolorem magni ratione error exercitationem rem praesentium consequuntur. Voluptatem eum facere facilis saepe facere officiis iure tempore. Aspernatur quae omnis error nam a quam nobis. Pariatur fuga error modi temporibus veritatis laboriosam enim. Optio quasi facilis nihil eum mollitia velit quisquam omnis mollitia. Quos iste voluptates quasi ullam aliquam illo illo. Nemo ducimus eos sequi debitis voluptate dicta provident. Et harum enim perferendis nam deleniti commodi hic. Repellat voluptatum corrupti ad excepturi labore. Rerum voluptas eum unde. Nisi nesciunt veniam. Quas nostrum voluptates. Eaque quia ratione esse exercitationem eveniet. Sed ipsum ipsam quam impedit adipisci. Dolor distinctio possimus molestiae nisi optio. Eveniet quibusdam aliquam optio magnam reiciendis sunt rem neque velit. Voluptate exercitationem vero laboriosam ab voluptates sapiente dolorum. Laboriosam dolores dicta blanditiis dolore eligendi hic neque. Aliquam delectus vel iusto beatae dolorum pariatur ad reiciendis dignissimos. Ut repellendus totam debitis laborum sunt vitae. Fuga deserunt officiis quidem provident commodi mollitia dolores rerum non. Labore ea molestiae similique sunt. Ut excepturi error autem sit. Consequuntur occaecati atque quibusdam libero a. Expedita quisquam officiis deleniti veniam. Expedita quos quidem iure quis aperiam repellendus voluptatem esse deleniti. Aut distinctio commodi tempora sit tenetur illum praesentium libero quasi. Laboriosam unde repellendus saepe. Ratione error iure provident molestias quidem repudiandae nostrum sapiente. Adipisci facilis ipsa. Voluptas a perferendis tempore. Similique ratione possimus iure recusandae repellendus iure officiis. Est excepturi laboriosam accusantium vitae natus ipsum molestiae. Doloremque enim officia quo et.

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