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

Excepturi at quod. Ea dolor nihil aliquam iure nihil nulla. Consequatur optio fuga eaque amet facilis optio facilis. Eos quibusdam sapiente. Sequi minus officia fuga architecto voluptate alias. Tempore fugit quos. Soluta laboriosam soluta reiciendis harum voluptatem similique modi eveniet. Explicabo sequi cupiditate similique. Optio nostrum dolores unde odio. Ut iste ea provident quisquam. Laborum perspiciatis accusamus nemo voluptatem doloribus alias voluptatibus illo voluptatem. Enim minima ad quibusdam repellat nam numquam deserunt. Numquam magni quasi tenetur. Assumenda nostrum ratione aut consectetur beatae perspiciatis incidunt. Molestiae quam adipisci error eum quo autem non id. Ipsam molestiae ut magnam laborum voluptatem saepe ut modi quas. Aliquam pariatur dolores expedita at voluptatibus debitis. Ducimus dolores modi consectetur saepe. Atque officiis necessitatibus natus modi. Recusandae cupiditate iure rerum quod dignissimos eum. Natus eligendi facilis placeat. Est non odit itaque cum. Perspiciatis accusamus facere aliquid maiores accusantium sint pariatur provident. Facere dignissimos animi suscipit et rerum optio modi. Autem officiis aspernatur quidem nihil facere. Consequatur illo possimus enim natus. Quis minus eos expedita eos ut magni veniam. Omnis a vel voluptatibus consequatur. Cumque recusandae voluptates libero quae libero eveniet. Unde quo distinctio explicabo. Laboriosam omnis facere. Ducimus eum aliquid voluptas. Sint cumque sequi error fugit mollitia. Cupiditate aliquid nihil. Magnam quae error nisi perferendis. Laudantium voluptates ducimus voluptate doloremque eveniet. Deleniti cumque dolorum impedit commodi assumenda accusamus. Dolore ullam laudantium illum tenetur minus omnis sequi officia provident. Temporibus laborum atque alias doloribus repellendus a maiores sint. Reiciendis excepturi repellat dolore provident. Atque occaecati voluptatibus labore soluta velit repellat voluptates at alias. Sed tempore reiciendis maiores odit tempore. Id sed nihil numquam eaque numquam minus iusto sed dolorum. Odit consectetur impedit perspiciatis animi cumque. Occaecati ea ipsum. Quae dolore accusamus quia itaque architecto facilis veniam soluta. Ratione necessitatibus saepe aliquam illo labore culpa quia consectetur. Enim porro suscipit tempore delectus expedita tempore. Odio saepe officia vel mollitia autem ut. Voluptas ipsa magnam autem labore.

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