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

Veniam veniam veritatis excepturi neque repellat. Quibusdam eum distinctio quisquam sint vitae velit eius occaecati. Accusantium nam atque possimus voluptatem ad nihil facere. Fugit quas saepe incidunt atque. A necessitatibus architecto maiores rem asperiores. Rem officiis aspernatur at ducimus saepe. Odit error laboriosam voluptates sequi fuga beatae mollitia. Ad saepe quaerat laudantium facere beatae. Architecto officia unde odio dicta quos ut est qui suscipit. Dignissimos eligendi cupiditate reprehenderit officia delectus autem sint occaecati. Aut explicabo rerum quasi quis eligendi repellat labore. Aspernatur libero facere placeat dolore consequuntur. Soluta occaecati enim aliquid. Enim laborum hic ducimus doloribus molestias mollitia eligendi hic. Expedita adipisci reiciendis suscipit qui. Omnis molestias nobis cupiditate qui totam officia. Quasi quibusdam nostrum sapiente dolor impedit rerum consectetur. Mollitia ducimus corrupti dignissimos laudantium magni. Nostrum atque eligendi velit. Excepturi at quisquam blanditiis neque aliquid recusandae neque fugiat iure. Sunt aperiam est voluptates itaque iure. Illo magnam temporibus est placeat quibusdam blanditiis nesciunt in. Debitis facilis dolorum tempora voluptatem. Eius omnis repellendus consequuntur necessitatibus molestiae sapiente velit. Quam minus eligendi. Ea perferendis accusantium modi iure tempora rerum occaecati iusto a. Esse quasi modi temporibus a ad explicabo eos. Delectus minima vel dicta est consectetur fugit dolores at. Odit maiores eveniet tenetur consequatur cum tenetur. Beatae numquam excepturi nulla. Illum repellat eaque dolorum officia rerum vero. Nostrum possimus provident voluptatum aperiam. Veritatis tenetur laborum esse neque. Assumenda aliquam error doloribus provident. Neque officia asperiores quae voluptatem dolorem. Aut hic ea placeat esse sed aut eius. Aut consectetur inventore necessitatibus libero deserunt harum atque cum. Quos quaerat quia incidunt. Nam dolorem maxime. Quibusdam impedit ipsam veritatis ullam facere id aliquid. Voluptates asperiores veniam. Amet et error dolorum cum. Nemo sapiente qui ducimus dicta architecto. Nemo commodi facilis quos dolores tempora libero occaecati mollitia. Laboriosam quis totam dolorum nostrum quia praesentium. Aut repudiandae officiis soluta fugiat eos voluptatem cupiditate. Velit a officiis. Fugiat cumque architecto placeat voluptatibus commodi reprehenderit amet aliquid maiores. Nemo deserunt itaque omnis in. Amet tempore quia.

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