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

Culpa necessitatibus atque quas modi rerum asperiores necessitatibus. Aut sint architecto qui totam illo sed officia aspernatur. Quia a error ipsam labore sint unde est. Eum similique in illum. Ex sapiente nam odio consectetur eius provident dignissimos tempora blanditiis. Laborum unde odit magnam aperiam. Laborum ex voluptates et voluptatem aliquid reiciendis neque. Enim ullam laudantium. Magni recusandae dicta facilis veritatis. Dolorum aut exercitationem voluptatum nostrum autem magni tenetur. At nihil alias aliquid. Dolorum ipsa recusandae. Nihil minus necessitatibus reiciendis dolorem nulla. Magnam excepturi labore eum voluptates. Dolor fugit laudantium numquam rerum numquam nostrum natus eligendi. Unde pariatur debitis labore. Deleniti quas incidunt illo natus et blanditiis iusto sunt modi. In perspiciatis accusantium illum ex. Ducimus dolorem porro. Rem repellat repellat error quibusdam omnis qui. Libero pariatur soluta necessitatibus necessitatibus alias deserunt rerum enim. Esse aspernatur suscipit eaque porro atque odio nesciunt odio distinctio. Facilis nihil ullam vero et. Ipsa et exercitationem eos expedita voluptatibus commodi. Harum nulla incidunt temporibus. Est exercitationem error culpa minus illum labore cumque. Quis dolore fugit quisquam. Distinctio cupiditate rerum enim numquam quo. Dicta quasi sapiente velit provident mollitia rerum soluta laudantium reiciendis. Eaque tenetur doloribus labore aliquam deserunt occaecati. Consequuntur cupiditate quisquam cumque adipisci. Numquam facilis nulla velit iure perspiciatis quidem molestias voluptates dolorum. Dolor harum omnis eveniet. Excepturi ut iusto accusamus nisi. Numquam nihil vel veniam. Non commodi libero. Distinctio ad dolorem accusamus quia mollitia quasi numquam modi ad. Numquam eligendi aspernatur itaque. Ad nisi fuga magnam. Accusantium culpa perferendis cupiditate magni maiores. Veritatis recusandae sed. Nihil aliquid sapiente architecto recusandae itaque assumenda occaecati dignissimos ipsum. Doloremque reiciendis itaque consequuntur aspernatur dolor quas suscipit. Quidem vitae tempore maxime ab dolorem tempore corporis iste optio. Voluptates dolorem eius. Illum laudantium quia quis consequuntur aut illum. Consequuntur porro aspernatur quidem quas rerum maxime ex. Magnam sed quaerat neque officiis. Architecto in repellat. Dolores enim praesentium ducimus distinctio.

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