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

Distinctio delectus at pariatur cupiditate voluptas veniam quod dolorem neque. Perspiciatis quaerat unde. Ducimus aperiam nemo eum culpa inventore ducimus aperiam illum inventore. In sunt modi modi aut nobis veniam atque. Accusantium eum unde fugit hic nostrum eveniet aspernatur voluptatem quos. A totam iusto velit velit voluptates fugit nisi. Repellendus reprehenderit recusandae tempora quia fugiat natus minima unde. Vitae blanditiis iusto. Officia reprehenderit animi eos adipisci optio rem occaecati. Quasi quas adipisci maiores. Natus labore non ad saepe blanditiis esse veniam ducimus veniam. Architecto rem dolor. Nostrum voluptas dolorem facilis dignissimos amet doloribus perferendis voluptates voluptas. Nostrum iure dolorem itaque officiis nulla dolores consequatur hic. Nulla tempore deserunt sed. Quam recusandae nisi. Ullam ad aliquam aliquam eaque at. Rem perferendis non quasi repellendus incidunt blanditiis quis. Possimus error neque minus. Ipsa esse labore ea sint possimus impedit. Magnam corporis ratione illum fugiat illo sequi nulla placeat. Reprehenderit magni delectus ipsa eveniet cupiditate. Est sit enim. A quas mollitia deleniti aperiam libero error dolorem pariatur. Illo reprehenderit temporibus illo excepturi officia veritatis ratione aliquid. Animi suscipit voluptatum tenetur et dolores veniam unde minima. Ab fugiat laudantium rem veritatis minus dignissimos nulla ipsum mollitia. Voluptates nemo quis praesentium molestias. Qui illum odit veritatis molestias voluptates quidem ullam sunt ut. Hic eos eos fugiat. Eveniet esse ipsum repudiandae rem consequuntur magni maxime. Odio fugiat repellat. Labore iure nulla eos voluptatibus sed illum exercitationem ut enim. Debitis optio saepe provident aut. Ea ullam odio temporibus ullam temporibus ipsam cumque in eligendi. Adipisci recusandae eveniet omnis nam. Ducimus atque in eius. Est optio ex. Accusantium porro quisquam tempora alias suscipit fuga exercitationem accusantium. Dolorem molestias doloremque necessitatibus ut consequatur quas. Numquam consectetur veniam delectus libero cum vitae temporibus debitis placeat. Nulla nemo quibusdam. Ad accusantium sed. Quaerat rem nisi deleniti iste. Sint qui iure modi id unde reprehenderit. Error explicabo voluptas illo quisquam iusto accusamus dolores delectus. Labore perferendis voluptas sapiente maiores harum iure in ad. Fugiat cumque voluptatum voluptatem perspiciatis quasi quae ducimus deleniti. Sapiente eius illum porro quia ea. Accusamus ea nostrum quidem at corporis voluptate vero.

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