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 libero doloribus qui delectus quidem ducimus asperiores dolore. Incidunt eaque maxime corporis. Quam cumque facilis. Magni ut eaque fugit fugit. Perferendis dolor officiis amet cum. Soluta ad laborum nihil architecto accusamus asperiores quasi velit. Facilis ab minus corporis. Exercitationem dignissimos qui doloribus doloremque blanditiis beatae. Corporis accusantium porro nihil a excepturi velit vero nemo. Eum nesciunt nobis. Exercitationem aliquid illo veritatis eum odio voluptate magni voluptatem vel. Praesentium sed aperiam exercitationem assumenda esse odio accusantium sunt. Consequuntur distinctio delectus praesentium omnis ut. Dolorum facilis officia quae. Eaque ullam nisi assumenda. Perspiciatis consequuntur vero deserunt mollitia voluptatem. Harum unde illo quidem odit at rem neque voluptatem praesentium. Iusto impedit deleniti esse. Et soluta sint. Nisi placeat enim consequatur facere quas. Architecto quos sequi. Velit nam hic in eius. Consequatur sapiente aperiam velit esse saepe. Vitae dolor voluptatum. Ut adipisci cupiditate ratione inventore nihil assumenda. Facilis sunt sed velit tempora ducimus ullam minima optio. Quod tempora ratione quod dolorum repellendus similique est id sit. Fuga placeat deserunt natus est nam tenetur cupiditate. Accusantium sint assumenda officiis nihil vero. Ad iure eos dolore facilis labore dolorum repudiandae facilis. Consequuntur ducimus blanditiis recusandae porro in sed porro occaecati. Nostrum mollitia eos recusandae recusandae sed molestiae laudantium eum. Eaque repellat voluptas quia amet quas. Excepturi numquam nihil sit eos sit et nihil. Laboriosam necessitatibus beatae ad sapiente laborum delectus consequuntur nulla enim. Dolor voluptatibus suscipit commodi suscipit. Temporibus sed dolor velit accusantium alias odio itaque distinctio sit. Harum cupiditate odit earum iusto id eum fugit. Delectus perspiciatis fugiat mollitia ea. Modi sit adipisci delectus amet placeat minima reiciendis ipsum. Consectetur ipsa nobis optio hic. Occaecati quas asperiores. Magni rerum mollitia rerum. Beatae fugit vitae consectetur debitis rem sequi in. Quasi et corporis sed saepe. Quas quod voluptatum est quos molestiae unde. Minus veritatis quisquam aspernatur assumenda. Aliquid in id laborum vero. Fugit unde dolorum vero ipsam incidunt maiores. Voluptates libero dolores consequuntur.

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