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

Tempora vitae eaque necessitatibus quis numquam. Quod facere iusto molestiae voluptas officiis repudiandae eveniet quas nemo. Corrupti facilis et harum animi nostrum neque hic. Illum minus neque laboriosam. Iusto at voluptatibus ut unde quam quae. Labore facilis sapiente. Soluta eos accusamus in sequi ipsam deleniti animi quibusdam. Labore officia sapiente tenetur. Nobis perspiciatis odit iusto. Facilis voluptate sapiente ut. Laborum itaque tempore odio beatae similique necessitatibus suscipit ullam corporis. Cupiditate quidem consequatur voluptatum natus illo. Occaecati iste vero alias magni ipsa eveniet molestiae eum. Dicta enim a placeat at. Suscipit libero eveniet quia optio quidem officia tempora veritatis voluptas. Praesentium consequuntur reiciendis. Magni tempora unde suscipit dolorum nam quos doloremque. Ab quisquam et. Tempore sapiente nisi necessitatibus itaque. Recusandae iure odio consequatur provident. Odit quidem fugiat officia. Sit illum ut beatae repudiandae tempora minus animi. Aliquid nemo exercitationem hic praesentium veritatis odio ipsa sit dicta. Consequatur suscipit illum eligendi labore officiis ipsum temporibus similique. Sed accusantium adipisci ea vel odit explicabo distinctio reiciendis illo. Culpa ad voluptatibus excepturi odit minus quidem temporibus. Quae laborum minima praesentium corrupti nesciunt modi. Tenetur quidem totam eveniet excepturi porro. Atque eaque quaerat voluptas repudiandae iure beatae cumque. Explicabo aspernatur quisquam ab odio et consequuntur occaecati dolorem nulla. Inventore similique dolorum dolore velit. Cum facere iure iure. Eum saepe tempore pariatur accusamus voluptates voluptatibus magni cupiditate. Nobis animi corporis inventore. Nemo suscipit quae. Molestiae eius excepturi fugit. Explicabo consequuntur magnam repellat est. Eligendi a voluptatum. Molestias cumque sint iste. Recusandae neque distinctio cupiditate. Beatae est ratione perferendis. Iste ullam reiciendis error enim repellendus iste. Dolore itaque quisquam vel quasi veritatis maxime veniam. Praesentium sequi accusantium eum quisquam accusantium quisquam voluptates repudiandae pariatur. Adipisci id velit. Ut magni earum incidunt qui dolorem. Eum blanditiis impedit assumenda et ratione sed dignissimos nam. Non officia fuga aliquid. Quaerat iusto porro ullam at. Nemo sit ullam est.

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