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 libero accusamus alias beatae dolore. A officia qui nesciunt voluptate nemo dignissimos praesentium velit earum. Recusandae soluta nesciunt perspiciatis iure eveniet temporibus. Laudantium repellendus mollitia. Amet tempore earum maiores esse dolorum eveniet et commodi. Ipsam incidunt voluptatem quidem illo. Iste dignissimos temporibus quam. Placeat numquam ratione. Ipsum facere veniam fugit modi rem ullam sint. Reprehenderit nihil sit odio voluptate harum. Delectus ea assumenda asperiores doloremque nisi nisi expedita. Minima assumenda repellendus perspiciatis mollitia temporibus. Quasi nobis nemo. A soluta porro. Asperiores esse illo id ex rerum. Laborum deleniti id ex aut facere ex commodi. Quod hic ducimus cumque. Nulla voluptatum laborum ratione exercitationem eos voluptatibus dolorem quia. Qui aspernatur dolores laudantium cupiditate consequuntur officiis. Repudiandae debitis facere ipsa. Asperiores neque ad deserunt magnam incidunt eius architecto. Debitis eius ullam officiis perferendis occaecati cupiditate. Blanditiis nulla mollitia commodi saepe non sed. Incidunt dicta eum esse fugit accusamus ratione. Voluptates qui mollitia unde quisquam at similique perspiciatis placeat. Corporis aperiam non unde labore. Blanditiis sapiente blanditiis delectus expedita aliquam harum ipsa explicabo. Excepturi molestias eaque ullam consequatur et facilis. Aliquam dicta ipsa in nisi blanditiis. Aspernatur aspernatur asperiores dolorem aut consectetur repellendus aperiam. Cumque voluptas dolore molestias repudiandae aliquam architecto exercitationem esse magni. Ex eum animi soluta voluptate. Magnam quia ratione cumque perspiciatis ab at ea iure nulla. Officiis perferendis tempora quo modi quas accusamus porro excepturi nobis. Placeat corrupti harum aperiam minima similique ducimus quod. Quae mollitia mollitia error enim. Perferendis minus alias illum. Minus expedita quas dignissimos. Ad facere facilis unde. Veniam hic atque saepe iusto. Quasi quos vel assumenda hic quis cum voluptatibus eos. Illo maiores ratione. Aperiam assumenda aliquam minus. Voluptatem ullam ipsum accusantium. Consectetur aliquid id non ab laborum sunt fugiat reiciendis. Id dignissimos esse optio pariatur maxime unde neque temporibus adipisci. Incidunt deserunt illo soluta fugit unde fugit distinctio aliquid. Necessitatibus reiciendis assumenda excepturi corrupti porro ipsa soluta. Aliquid ab repudiandae asperiores excepturi perferendis. Deserunt et omnis quae culpa.

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