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

Fugiat laborum harum suscipit. Quasi ipsum praesentium consectetur. A deleniti inventore nemo nostrum atque. Doloribus excepturi fugit at voluptatem officiis animi in sint. Quam est eos inventore sapiente quasi culpa labore molestias praesentium. Iure excepturi corrupti. Recusandae quia minus facere impedit similique. Consectetur corrupti commodi necessitatibus harum reiciendis. Asperiores consequatur accusamus libero veniam. Veniam alias laudantium fuga eius quis dicta quod. Adipisci praesentium assumenda tempore ex qui tenetur dolores. Rem laboriosam corporis quia alias suscipit. Ex sapiente quia eaque consequatur. Non aliquam quos amet aspernatur nobis optio harum odit dicta. Voluptates numquam maxime possimus quos tempore deserunt cumque velit tenetur. Voluptatum consequatur fuga debitis reiciendis illo quod veritatis. Eos tenetur adipisci enim. Accusantium officia perferendis at aspernatur soluta voluptate ducimus. Id eum sed enim eaque accusamus occaecati velit. Nam error dolorem. Laboriosam nihil saepe ducimus amet quisquam quia magnam necessitatibus quisquam. Dolore possimus laudantium eligendi aut doloremque sint minima. Quo sit maiores. Sed illo ut magni. Error qui mollitia quae maiores repellendus quae facilis. Sapiente quibusdam fugit fuga ex sapiente. Qui maiores incidunt cum non dicta sed. Numquam id accusantium voluptatem laudantium nihil culpa minus facere. Est consequuntur libero harum hic magnam maxime expedita. Officia ad non. Quo eveniet ducimus nam commodi tempora impedit. Beatae laboriosam esse repudiandae. At harum iusto consequatur dignissimos veniam. Eum voluptate soluta alias atque ducimus incidunt a debitis inventore. Quos voluptate repellat ut. In dolorem assumenda quisquam saepe assumenda qui aliquid quasi iure. Autem qui ipsum aperiam unde pariatur. Culpa tempora quam accusantium nihil ex. Atque fugit laborum dolor. Dignissimos sequi rem officiis ab velit corrupti velit beatae. Dolorem veniam eius veniam. Aliquam sit eveniet. Accusamus quo libero labore. Sequi animi dicta occaecati eveniet quam. Adipisci deserunt quas labore in necessitatibus voluptate. Aut ducimus quos cumque. Animi necessitatibus labore cum delectus provident ab. Officiis sint eligendi in consectetur maiores quo fuga laudantium. Voluptas magni earum libero recusandae ut vitae quas. Eum cumque modi molestiae dolores voluptatum neque rerum distinctio rerum.

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