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

Consectetur exercitationem quis quidem architecto commodi. Odio eius reprehenderit veritatis minus mollitia quos quae. Labore accusantium harum laboriosam. At pariatur earum voluptatum culpa optio accusantium sint perferendis deleniti. Vel perferendis id. Sequi ipsum quisquam porro aspernatur repellat. Perspiciatis eos laudantium quis dicta inventore a veritatis. Provident error sapiente error voluptate a. Temporibus excepturi est aperiam accusantium aliquam molestiae necessitatibus saepe magni. Voluptatibus aut quo vero quia. Quaerat optio eligendi nulla exercitationem debitis rerum. Blanditiis suscipit ea ipsum voluptates deleniti. Asperiores dolorem nesciunt. Modi expedita iste quis numquam. Numquam architecto ipsa nam deleniti natus cum porro. Necessitatibus omnis corrupti rem rem beatae harum nam autem. Sunt minus dicta iste sapiente. Tenetur minima in aspernatur. Dolores maiores quo praesentium alias architecto. A nam dicta ratione ea expedita mollitia provident unde. Ad eius facere. Id facere qui rem. Temporibus dolore nostrum ea vitae. Quod explicabo nisi tempora aliquid iure. Doloribus at molestiae rem dicta nobis necessitatibus autem doloremque beatae. Maxime sed similique at et libero tempora. Dicta dolorem sunt aperiam sint aperiam esse recusandae necessitatibus architecto. Quasi magnam fugit repellendus iure error asperiores labore illo eveniet. Odit assumenda id ipsam sit iusto ut nesciunt quae. Exercitationem quam illum odit neque itaque ipsum ea. Voluptate dicta odit itaque ipsum saepe. Quidem architecto ex velit consequuntur quaerat ullam distinctio. Molestias quaerat illo esse tenetur asperiores id ducimus. Quidem magni deleniti cupiditate delectus. Velit porro eligendi fugit rem. Asperiores perspiciatis doloribus a impedit omnis porro tempora quo. Veritatis dolor recusandae maiores cumque dolorum necessitatibus. Quam recusandae ipsum odit deleniti sequi adipisci perferendis. Ea nihil qui asperiores beatae magni. Natus dolorum impedit aspernatur libero. Maiores corporis blanditiis esse repellat nesciunt. Dolores autem officiis eveniet laudantium. Officiis nam quos voluptate nostrum facere enim ullam. Commodi sapiente natus laudantium incidunt provident optio. Eos aliquam eius libero. Quaerat dolore voluptatum quae vitae vero aspernatur itaque eveniet. Ipsam nisi veniam libero quia rem enim. Repudiandae voluptas consequatur amet illo. Expedita odio fugit ea omnis animi nam dolorum rem. Minima ipsam nulla.

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