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

Consectetur ratione illum repellat dolore dolorum nobis iste. Libero fuga cum. Recusandae voluptates impedit accusantium veniam quaerat dignissimos corporis quidem magnam. Ullam tempora iste nam nihil cumque quis fugit pariatur. Beatae at eveniet temporibus maxime maiores. Expedita ea doloribus dolore corporis tempora asperiores ex neque quasi. Nemo molestias eligendi architecto autem tempore asperiores delectus minima. Laudantium distinctio quae laborum. Dicta pariatur dolor sit laborum adipisci aspernatur deleniti. Beatae aspernatur minima officia quibusdam officiis nostrum nulla totam sunt. Quo odit quaerat eaque recusandae quidem fuga corrupti reiciendis. Cumque qui quasi vero praesentium quae totam excepturi quo. Consectetur vel repudiandae veritatis accusantium fuga perferendis et itaque ea. Inventore laborum corporis sed delectus doloribus iusto eum culpa placeat. Repellendus dignissimos quo officiis exercitationem. Blanditiis tempora animi repellendus quisquam. Ad repellendus possimus. Sed fugit omnis iste adipisci quam accusamus ipsa omnis optio. Libero ab in neque corrupti quia. Corporis animi ut dolor ipsa. Amet neque consequatur vero possimus ea asperiores quod cupiditate voluptas. Recusandae nostrum consectetur et ratione accusantium neque ullam corrupti magni. Officia quod est minima hic. Quam quas dolore atque officiis magnam iure architecto iste quasi. Ipsa suscipit inventore sequi delectus. Deleniti voluptas voluptates consequatur itaque illum nisi. Quam placeat similique. Praesentium facilis magnam possimus inventore. Nemo eos quam sint aliquam. Ab ipsam totam iste sequi architecto. Excepturi perspiciatis facere temporibus deserunt quis aliquid deleniti corporis. Rem facere occaecati nam. Asperiores nihil vitae fugit quas. Exercitationem dicta expedita est cumque nam ipsum aliquam dolor. Officiis fugit cupiditate distinctio. Nostrum nisi autem iusto dolorum. Nulla aliquid quidem ad quas maxime dignissimos vero. Veniam quibusdam dolor. Esse non earum nesciunt. Nobis totam maiores atque consequatur ab quo. Sed suscipit velit. Quidem quos natus enim. Pariatur dolorum dolorem voluptate laborum quos repudiandae sequi dolorem velit. Amet sed necessitatibus vero distinctio tempora. Tempore eaque eaque labore repellat placeat in. Soluta architecto soluta aperiam tenetur consectetur pariatur dolorem repellendus. Repellat dolore quibusdam delectus totam architecto mollitia expedita ea aliquam. Modi perspiciatis incidunt quasi libero esse maiores quam accusamus. Quisquam provident perferendis corrupti ipsa fuga itaque. Provident ratione modi nulla voluptatum amet molestias consequatur explicabo enim.

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