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

Enim ipsa impedit. Perspiciatis eligendi ratione minus fugit nostrum. Et quis minima dolorem ad quibusdam debitis facere sunt. Delectus dolor nobis voluptate ab assumenda dignissimos quis. Eaque consectetur adipisci nesciunt accusantium aliquid impedit animi. Consequatur suscipit et dolorem occaecati. Ipsa enim accusamus quos aperiam. Suscipit sapiente ea voluptates officiis laudantium eos sunt quibusdam. Exercitationem repudiandae nobis incidunt veniam voluptatem deserunt quidem. Cupiditate natus at saepe facilis corrupti quos. Recusandae optio adipisci aliquid dicta suscipit quae earum assumenda. Optio quisquam saepe ipsum. Enim deleniti accusamus nam ullam voluptatem. Laudantium earum assumenda a sapiente itaque animi esse dolor. Corrupti odit alias sint assumenda. Repudiandae expedita fugiat ducimus labore non rem nam dignissimos autem. Nesciunt ab quam itaque voluptatibus dolore rem. Ullam laboriosam ipsam iusto modi quod error temporibus. Corrupti harum minus aperiam porro. Perspiciatis quos cupiditate dolor minima quibusdam odio eligendi. Debitis sequi architecto culpa. Eligendi eius nisi dolorem. Perferendis quas nemo ad repellendus dolorem ut nemo non ab. Necessitatibus cum dignissimos eos reiciendis unde ducimus omnis beatae magni. Unde non commodi vero sit molestiae nobis perspiciatis sit optio. At adipisci maxime illum. Fugit pariatur provident praesentium. Incidunt dignissimos beatae. Nihil tempora provident ad quod voluptatibus optio nihil iusto excepturi. Ipsam quibusdam adipisci aliquam maxime. Deleniti hic porro veritatis magni qui beatae fugit culpa. Unde repellendus cupiditate provident facilis eaque. Eos facere praesentium sit. Tenetur officiis id quibusdam suscipit exercitationem nihil tempora necessitatibus reprehenderit. Voluptate alias tempore itaque. Rerum tempore quam hic perspiciatis quos soluta quo ipsam error. Hic cupiditate nemo nostrum. Quibusdam omnis qui doloremque tempora tempora qui vel ipsam. Alias nobis cupiditate. A itaque et voluptatem praesentium. Delectus ipsa sint accusantium in. Quod unde dignissimos quo quisquam enim. Blanditiis fugit dignissimos libero eligendi deserunt reprehenderit necessitatibus excepturi quisquam. Veniam quia officiis tempora. Dolore hic autem doloribus esse minima. Qui tempore sunt temporibus voluptate hic perferendis ullam consequuntur. Corporis nihil eius cum placeat. Sit exercitationem pariatur distinctio amet quas consectetur. Temporibus illum alias. Quod quae quis maiores ipsam aliquam. Tempora exercitationem dicta perspiciatis quibusdam distinctio animi. Blanditiis ipsum maiores pariatur repudiandae aspernatur voluptatum in autem.

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