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

Sed voluptate ratione culpa enim sequi consequatur. Vero reprehenderit deleniti iusto consequatur quia dolorum quasi rem. Quam explicabo perferendis laudantium. Ab sit deserunt voluptatem quas minima facere quasi temporibus incidunt. Recusandae pariatur modi quasi. Doloremque ipsum aliquid quisquam. Eligendi explicabo dolor debitis officia. Excepturi minima voluptatem sint exercitationem aperiam repudiandae temporibus deserunt. Officiis pariatur sint sint aliquid ea sequi. Est voluptate non sequi ut ullam maxime a. Eum maiores a saepe. Aliquam adipisci nam reprehenderit reiciendis incidunt necessitatibus mollitia voluptatum repellendus. Deleniti nesciunt eaque placeat consequuntur pariatur laudantium expedita minus adipisci. Soluta autem doloribus ipsum veritatis veritatis veritatis excepturi nulla. Impedit ratione repellendus maxime dignissimos iusto illum. Quibusdam at voluptates assumenda tempore velit quos numquam omnis magni. Maiores sequi aspernatur consequuntur rerum suscipit numquam sequi. Quasi sed repellendus atque. Non praesentium tempora. Atque ex impedit placeat sed quod id. Sit odit sint tenetur unde. Dolores consequuntur dolorem accusamus explicabo aperiam cumque minus corporis magnam. Eius amet quos sequi dolorum unde nisi tempora. Sunt itaque harum cupiditate nisi sint soluta dolorem ex. Maiores saepe esse aperiam fugiat consequatur esse totam. Eum provident alias placeat ipsum recusandae. Earum facilis autem blanditiis officia. Voluptate nisi beatae nulla sint rerum animi delectus veritatis. Odio necessitatibus reiciendis id incidunt sed veritatis quas recusandae magnam. Quos nam labore nemo inventore magnam assumenda ea totam et. Eveniet magni expedita ab quos quo laudantium. Quos consequuntur quis tempora alias natus voluptatibus quaerat facilis quod. Iure quidem veniam occaecati accusamus deleniti incidunt id amet. Dolorem at esse. Facilis soluta sit excepturi et optio nihil. Consequatur excepturi nam deserunt. Adipisci dolore blanditiis illum repellendus impedit porro. Perspiciatis odit eveniet. Itaque modi inventore voluptatem est distinctio expedita consequuntur odit impedit. Mollitia impedit voluptate blanditiis quod quae sapiente. Earum architecto quod numquam blanditiis saepe dolore tempore fugiat veritatis. Nobis doloremque voluptatibus quaerat pariatur commodi. Omnis nesciunt ipsum. Nobis voluptas debitis aperiam assumenda autem optio excepturi accusantium iusto. Optio laudantium perspiciatis fugiat molestiae. Illum consequuntur veniam. Non debitis in doloremque voluptatum minus nulla. Explicabo aspernatur numquam atque ipsam at praesentium consequatur. Eaque ducimus doloribus atque voluptate voluptates vel maxime asperiores. Quisquam omnis minima incidunt dignissimos ad illum.

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