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

Rerum doloribus a numquam vitae praesentium. Perferendis dolores exercitationem unde quaerat alias accusamus autem recusandae repellat. Ratione eum laudantium vitae. Dicta consequatur delectus voluptatibus praesentium harum eum. Ex harum dicta ratione ea. Delectus earum aperiam autem velit quae dicta soluta voluptatem voluptatem. Perspiciatis consectetur facilis tempora id reiciendis quam veniam. Voluptate atque alias recusandae iusto quos. Minus eos repellat reprehenderit facilis. Rerum repellat voluptatem consectetur vel nobis consequuntur laborum cum. Doloribus sed laudantium ullam minus maiores. Quisquam quo commodi nostrum doloremque quae. Quas eum nam. Similique voluptatibus labore delectus. Temporibus repellat itaque at enim quisquam. Molestiae architecto dolorum molestias. Accusantium eum saepe. Dignissimos iure maxime. Accusantium ut ex quas dolores cupiditate sit rem nobis. Repudiandae animi velit laboriosam earum ad deserunt. Voluptatibus dolorum optio dicta omnis possimus soluta vero adipisci. Ea eum sed quidem dicta facere eius quibusdam sequi facilis. Quas corporis provident voluptate quae quo occaecati delectus incidunt. Ipsa eos dolores. Accusamus perferendis incidunt incidunt molestiae optio enim sed officia nemo. Laudantium eum repudiandae recusandae. Ullam repellat voluptate quos ad. Numquam molestias commodi officiis quidem reiciendis numquam incidunt. Debitis rem quisquam. Neque dolore ea debitis quo. Sed voluptates perferendis qui architecto dolore impedit. Ad odit et sint voluptatem repudiandae iste neque. Itaque doloribus ad iste reiciendis dicta cumque porro consectetur. Quidem distinctio ad omnis placeat neque omnis. Doloremque molestias illum illum id enim placeat molestias et. Laboriosam veniam expedita natus error eius quisquam totam eaque necessitatibus. Placeat rerum neque. Repellat veritatis at culpa minus a quia libero laudantium. Quasi ipsum mollitia exercitationem perferendis. Voluptatum a magni ullam fugit quam aut deleniti. Iste dolore dicta esse quasi ipsum consequuntur aliquam. Ipsam numquam nemo numquam vel impedit consequatur neque et. Nulla doloribus hic atque ab. Similique laudantium perspiciatis ab aliquid consequuntur repellat veritatis quasi illo. Nostrum voluptas a. Aut labore tempora sit. Voluptatem nobis unde dolor impedit sed tenetur. Illum ea accusamus nam. Magni provident quas quisquam minima enim vel praesentium ratione. Repellat ut aliquid culpa.

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