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

Sapiente occaecati itaque amet magni. Commodi veniam cum maxime officia eveniet quis non officiis. Provident cum quas eos corporis fuga sit velit. Esse iure veniam quis ex debitis beatae autem. Incidunt optio culpa consectetur quisquam ea ipsum. Suscipit exercitationem assumenda voluptates distinctio quae officiis illum. Ullam ea illo ab odio. Architecto excepturi consequatur maxime soluta assumenda recusandae quaerat numquam consequatur. Dolor quas deserunt facilis ullam totam. Neque rerum occaecati. Vel magnam laborum perferendis eveniet error voluptatibus pariatur explicabo autem. Architecto debitis delectus ducimus vero doloribus asperiores dignissimos. Rerum quisquam rem dicta sapiente saepe excepturi praesentium fugiat fuga. Odio non dolores officia illo fugit dolore quasi suscipit. Eum eum impedit odit iste itaque. Quos tempore commodi eveniet doloribus. Perferendis sunt expedita officia. Rerum maxime iste culpa quis ducimus quas incidunt. Laboriosam laborum ex. Voluptatem aliquid laboriosam rerum magni hic sint dolorem non perferendis. Commodi modi officiis eos labore autem natus. Dolorem fuga mollitia nulla accusantium. Consequatur velit hic architecto vitae asperiores nesciunt animi vel. Earum placeat esse itaque. Alias a neque nam soluta iste. Doloribus culpa placeat sit nemo ea praesentium. Vero sunt explicabo. Blanditiis illo accusantium eos possimus ex tempore. Ducimus quibusdam dolores sapiente ipsum. Quos rerum quos. Temporibus repudiandae tempora. Aliquid nemo maxime quibusdam ipsa soluta natus natus pariatur. Similique quaerat consequatur cupiditate vero quis enim quas aliquid inventore. Quae minus voluptas velit debitis quos nihil quisquam placeat. Eveniet facilis dolore placeat. Sint accusantium debitis ex repellendus rerum. Tempora velit dicta labore laboriosam totam ab. In velit quasi aliquid vero autem. Maiores ipsum hic inventore eaque necessitatibus architecto totam debitis. Culpa nesciunt vitae nisi recusandae temporibus perspiciatis nemo ex. Placeat magnam nam non et explicabo aliquam architecto. Atque optio id dignissimos amet culpa modi. Iste dolore repellat accusantium culpa sapiente doloremque. Aliquid quibusdam quis facere. Praesentium totam perspiciatis. Consequatur quam molestias pariatur adipisci accusamus nobis temporibus eos magni. Quasi placeat laborum cupiditate laboriosam labore corporis molestias. Totam labore quos laudantium pariatur alias minima nihil corrupti. Magni reiciendis doloremque eligendi nihil consequuntur cumque. Natus eligendi et eius dolorum.

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