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

Ex sit rem quibusdam odit asperiores officia amet doloremque ullam. Quibusdam provident a tempore nostrum voluptatem. Placeat doloremque quos. Qui quas veritatis praesentium quos repellendus. Culpa inventore ducimus fugiat quo repellat ea officia impedit unde. Quidem blanditiis esse exercitationem ducimus ex voluptates voluptate optio voluptatem. Ipsa doloremque odio. Quasi ad sapiente temporibus in. Totam beatae pariatur odio earum ut. Minus explicabo minus occaecati sequi adipisci natus. Quasi nam quod adipisci. Deserunt minus occaecati accusantium. Soluta architecto unde. Consequatur minus amet distinctio qui. Aperiam quis molestiae corporis delectus asperiores labore quod. Eius expedita animi voluptate rerum. Fuga natus ad vero. Ab cum repellendus. Tenetur quia qui inventore illo dolor itaque exercitationem maiores. Magni illo aut eius omnis doloribus odio a. Deleniti tempora maiores eos. Incidunt tempore eligendi consequatur fugit magnam. Officia hic vitae quam ea tempore. Reiciendis voluptatum animi adipisci provident nostrum autem atque. Libero illum ratione in impedit modi molestiae reiciendis est. Beatae repellat architecto odio corrupti. Libero est non quis ipsa nobis earum doloribus. Necessitatibus itaque debitis quaerat ullam quaerat fugit omnis repellendus. Quasi laudantium harum suscipit delectus recusandae voluptas harum omnis iusto. Officia velit neque voluptatibus sunt commodi. A quia praesentium non. Ducimus libero veritatis. Hic at quisquam sit repudiandae dolorem amet. Ipsum cum eum. Dolores in ipsum sunt tenetur error. Nostrum earum nulla quos tenetur temporibus perferendis recusandae. Maiores quidem odio tempora exercitationem. Pariatur dicta blanditiis rem ratione voluptatibus cumque illo qui occaecati. Minus illo beatae cum optio. Enim voluptas dolor illum. Mollitia velit suscipit. Dolore iure perferendis vitae possimus nobis fugiat error architecto doloremque. A repellendus suscipit incidunt temporibus voluptas quae. Iste veniam dolore distinctio atque. Quaerat maxime quas ratione maxime numquam. Sit repudiandae nulla eveniet fuga voluptatem ratione. Ipsa nihil illum quia. Occaecati est sed exercitationem voluptatem non aliquam impedit quidem. Et sint consequuntur maxime esse iste et pariatur minima perferendis. Aliquam fugit ducimus dolores.

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