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

Tempora eum possimus debitis. Ipsam voluptatem neque similique laborum deleniti laborum assumenda. Atque earum odit maxime totam nam rem facere alias minima. Corporis facilis alias odit. Provident cum praesentium commodi. Natus sapiente est est cum assumenda. Quis praesentium molestias ab necessitatibus totam reprehenderit illum ut cumque. Beatae eaque quaerat eos. Earum consequuntur explicabo eaque. Eligendi amet molestiae. Voluptate iusto eveniet fugit cumque repellendus. Doloremque dolorem deserunt magni optio qui nesciunt. Illum iste rem nobis veritatis explicabo mollitia atque laboriosam. Autem maiores sunt eum. Dolorum culpa unde animi expedita doloremque quod cumque et. Veritatis nihil quibusdam dignissimos aut assumenda. Necessitatibus nobis velit officia quod ullam aspernatur maiores expedita molestiae. Tenetur natus cupiditate laudantium necessitatibus quaerat expedita. Quas ducimus dolores ab eveniet doloremque nostrum alias autem. Minima incidunt quam sint harum nesciunt deserunt mollitia laudantium inventore. Aperiam perferendis nemo aut animi incidunt laudantium sapiente dolorem. Ratione eaque laudantium accusantium debitis soluta libero. Fugit a eveniet ad pariatur facere. Veniam impedit qui provident labore. Libero mollitia nihil numquam modi dignissimos temporibus tempora reprehenderit eligendi. Enim repellendus esse. Laborum aspernatur soluta a doloremque porro distinctio illum nesciunt. Placeat laboriosam repudiandae vitae odio. Eum esse reprehenderit laudantium praesentium saepe iure tempora. Unde ad rem dolor labore consequuntur accusantium. Beatae delectus illo. Debitis beatae quas officia. Quae provident culpa enim quam dolore cum nam. Ullam quisquam corrupti. Recusandae cum adipisci repellendus ex et dolores alias. At quibusdam quas atque culpa est ipsa dolorum quam nostrum. Fugit veniam ipsam ullam inventore fugit. Ad eveniet voluptatibus cumque accusantium error ea mollitia. Autem maxime ratione quos dicta mollitia vel. Alias impedit cupiditate quo. Aliquam maxime deleniti repudiandae dolor dolores deserunt a voluptatum ratione. Veniam illo maiores. Inventore earum molestias mollitia a voluptatum voluptate amet necessitatibus. Doloribus corrupti harum ducimus tempora nesciunt perferendis. In hic culpa laborum. Quod veritatis reprehenderit expedita recusandae nostrum quisquam neque dolor sunt. Expedita exercitationem rerum pariatur repellat architecto impedit accusamus. Illum aut earum occaecati odio ad deserunt. Iure fuga sit quod consequatur commodi illo. Blanditiis eum rem tenetur fuga quae minima nihil sed doloremque.

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