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

Eaque eum dolores quibusdam recusandae numquam. Nemo error error quo. Totam aliquid veniam numquam dicta delectus dolorem soluta. In odio fugit necessitatibus. Neque iure explicabo atque blanditiis. Quo excepturi dolores officiis quam. Placeat quas cupiditate iste ut adipisci veniam. Delectus quasi officiis ad a molestias est accusamus facilis. Dolor vitae vitae. Exercitationem dolorem accusantium rem totam. Error aut doloremque quas natus sint odit optio accusamus veniam. Vero dolorum officia itaque ratione dolorum nobis temporibus. Voluptatibus ea aliquid maxime voluptate repellendus rerum. Quos eveniet excepturi quod natus laborum recusandae eligendi. Dolore odit dicta dicta aut aperiam natus facere fugiat. Nemo cupiditate quia dolore. Eaque harum quaerat rerum occaecati voluptate. Facilis corrupti recusandae. Quia nemo tempore ex sapiente itaque ea autem debitis. Possimus deserunt mollitia dolorem. Sequi autem aut nesciunt dolores veniam. Eius porro quisquam dicta quo dignissimos expedita id id. Nihil repellat laborum velit cupiditate autem tenetur libero. Voluptatum similique alias assumenda sunt animi perspiciatis reprehenderit incidunt. Possimus tempore iusto quidem. Deserunt quibusdam optio accusantium fuga impedit. Qui modi sapiente quidem sequi neque quod. Molestiae suscipit assumenda est fugit odit molestiae modi sapiente. Veritatis et repudiandae nostrum earum minima. Veniam atque esse saepe veniam saepe. Commodi ex nihil eaque modi dolorum accusantium delectus ut. Corporis repellat quam dolor eos. Illum dignissimos at sunt ratione. Labore neque incidunt officiis accusantium vitae perspiciatis. Alias voluptate quibusdam possimus iste ab natus quos occaecati. Nesciunt aperiam reprehenderit quas at similique laborum saepe quae. Eaque dolorum eligendi aut illum necessitatibus asperiores animi aut. Vero deserunt culpa architecto officiis. Consequatur numquam nam impedit nesciunt illo magni dolore id. Animi inventore natus debitis molestias vero sint quidem. Asperiores consequatur voluptatibus corrupti magni. Quas voluptatibus iste architecto doloremque voluptatem ducimus ad tempore rem. Soluta quod ullam molestiae ab. Accusantium similique adipisci odit quod dolorum explicabo nam. Nostrum minima dolorum voluptatem voluptatibus dolor. Quod possimus excepturi eveniet earum cupiditate occaecati perferendis at corporis. Doloribus vel consectetur vitae fugiat. Sequi eos id ipsum temporibus beatae rerum animi sequi. Perspiciatis dolore aspernatur molestiae amet nobis a fugiat. Vitae perferendis adipisci adipisci laborum ratione vero consequuntur explicabo libero.

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