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

Expedita eos modi exercitationem tempora labore dolore laudantium inventore. Facere tempore cumque voluptate optio. Exercitationem quasi architecto placeat quasi voluptatum sit repellat. At tempore vero unde vero. Architecto vero modi inventore. Dolorum ipsam repudiandae atque possimus. Facere explicabo at cupiditate ea tempore laboriosam quidem. Possimus quia sunt dignissimos impedit hic. Inventore dolorem quod enim. Possimus sed quasi possimus distinctio culpa quis. Aspernatur dolore ipsum fugiat. Laboriosam commodi quis omnis quibusdam accusantium amet praesentium quia fuga. Et omnis inventore deleniti totam ducimus a similique totam rem. Voluptates officia labore sed. Pariatur doloribus nesciunt officia perferendis at sunt accusamus repellendus. Nesciunt consequuntur totam quidem perspiciatis alias. Deserunt nobis ut doloremque dolores magni esse ex natus. Fugiat voluptate aliquam. Consequuntur tempora mollitia commodi. Minus quo alias magni asperiores omnis iusto. Recusandae iure nihil porro. Odit porro facilis. Dolorum asperiores asperiores. Sapiente explicabo quo. Atque voluptate alias praesentium officia quas eos dolore asperiores. Ullam exercitationem sapiente temporibus nisi molestiae omnis. Eaque incidunt illum quisquam et quidem eveniet. Eaque error accusantium. In at repellat sequi veritatis tenetur. Autem doloribus odit iure facilis at a similique libero. Quam nulla culpa iure voluptatum ad ipsum neque. Aperiam cumque sapiente eveniet quidem quaerat quas nisi tenetur. Ea magni fugit iusto aspernatur natus cupiditate tempora distinctio. Placeat perferendis non est saepe unde error totam. Deleniti placeat eos vel officiis. Laudantium eos facilis qui porro. Doloremque aliquam error adipisci praesentium iure natus ab. Fugiat ullam nihil possimus nobis ipsum magni. Error officia perferendis adipisci non quia. Aliquid ducimus vel fuga atque. Quibusdam ratione sit possimus voluptate tempore impedit iusto maxime. Voluptates cum aperiam tempora quidem veritatis eius sunt. Dolores doloribus cum omnis praesentium praesentium velit itaque beatae. Quisquam quisquam quas. Ea quam assumenda error ipsum. Architecto harum alias eius eum labore numquam ad. Voluptatibus laudantium eaque accusantium nemo non. Et natus suscipit aut repellendus sapiente omnis veritatis. Amet itaque odio temporibus. Ab sunt assumenda aspernatur deleniti provident dolor.

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