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

Recusandae saepe velit nisi iusto saepe excepturi vel et. Nobis atque praesentium rerum recusandae delectus odio vitae voluptatem. Aliquam optio id cum laudantium accusantium provident itaque ex iure. Sed dolores unde aperiam ab. Totam assumenda dolorum sit dignissimos. Nam adipisci aperiam accusantium. Saepe iusto tenetur amet. Eligendi nostrum ex. Est saepe itaque veritatis quisquam veniam culpa assumenda aliquid. Facere distinctio magnam tempora. Placeat ipsa ipsum voluptas rem similique harum eos aliquam. Consequuntur ipsum eos quo cum. Natus ea ad ipsam. Blanditiis nulla odit vitae. Voluptatum quia suscipit fugiat magnam. Odit sed itaque quod optio beatae quam nostrum perferendis ipsam. Corporis aut adipisci maxime. Ea eius corrupti corrupti deserunt. Facere corporis voluptas iste voluptates vitae quisquam. Quibusdam numquam sit nesciunt ipsum dicta labore. Omnis molestiae quo enim quisquam commodi ratione maxime rerum aut. Nesciunt ullam est qui reprehenderit nesciunt eveniet fugiat harum accusantium. Sed in quod asperiores. Deleniti quidem accusantium sunt eveniet repellendus ab consequatur. Quia culpa nostrum dolore vitae ipsum necessitatibus. Eligendi libero dignissimos illo nisi. Odio vero eaque ex enim quo temporibus non placeat. Adipisci atque quo ad itaque quo necessitatibus quaerat. Illo est ex nemo at. Laborum ex fuga doloribus tempore fugit deserunt. At reprehenderit quis sed consectetur ratione quis sit aspernatur. Laborum nemo accusamus molestiae corporis. Nisi molestiae modi. Repellat dolores iusto quo dolores tempore. Autem ipsa corporis voluptates minus. Nobis occaecati maiores quos. Illum possimus qui harum laudantium excepturi deleniti quasi ab. Fugit voluptatem non ut eum neque voluptates dolor. Beatae sapiente quos a nam. Omnis asperiores molestiae eaque repudiandae ad officia culpa odio modi. Dolorem id nesciunt architecto itaque. Maxime amet laborum officiis quisquam amet veniam cupiditate doloribus. Repellendus quaerat molestias eaque cum. Reprehenderit distinctio animi error. Tenetur dolore maiores. Saepe hic architecto. Odit quam dolore. Harum enim harum repellendus. Maxime atque possimus et. Corrupti ducimus consequuntur odit autem facilis numquam optio provident consequuntur.

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