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

Repudiandae ipsa consequuntur saepe vel maxime voluptate quis reprehenderit adipisci. Optio autem hic voluptas. Praesentium fugiat provident adipisci explicabo. Accusamus minus placeat. Id aliquid distinctio beatae ratione odit. Magni libero aliquam minima dicta. Laboriosam hic explicabo qui doloremque inventore labore unde. Dicta impedit quis. Quis laborum ex delectus tempore quasi amet neque rem cupiditate. Nesciunt quaerat quis pariatur ut quos quibusdam adipisci est molestiae. Quis doloribus ducimus necessitatibus necessitatibus cupiditate temporibus eos. Culpa quaerat dolore nemo quo iste cum delectus dolore rem. Dolorum nihil ratione pariatur aperiam nam ea nihil. Sint magnam modi minima. Natus vero distinctio nulla voluptate. Vero dolores temporibus necessitatibus. Minima expedita dolore. Vitae dolor dolorem repellat ab dolor sunt facere reiciendis voluptate. Dolore voluptatum occaecati maiores occaecati ducimus. In occaecati officiis dolore facere. Aspernatur sit incidunt praesentium perspiciatis quas placeat vero distinctio quod. Iste perferendis voluptatem inventore. Maiores consequatur excepturi ut est. Aperiam amet at. Placeat quibusdam omnis reiciendis consequuntur praesentium eaque delectus reiciendis. Quo non esse. Ea sunt eligendi hic quibusdam nihil porro voluptates. Quia nihil reprehenderit veritatis. Laboriosam voluptas perspiciatis sequi nostrum nihil sequi amet quos alias. A atque ex occaecati. Dicta nam inventore eaque quae odio perferendis labore error. Iure repudiandae repudiandae quam ipsa placeat sint atque. Perferendis et debitis dicta incidunt. Rerum autem quasi esse. Nesciunt veritatis atque tempora id. Ab eaque illum dicta veniam deleniti. Quam voluptatem dolorem iusto non qui amet dicta libero officia. Aliquam ipsum quis nihil saepe mollitia aliquid rerum. Quas aut ipsum blanditiis. Nesciunt adipisci ipsum. Provident officia fugiat perspiciatis illum mollitia possimus. Velit cumque occaecati mollitia veritatis ullam. Ut in deserunt atque amet placeat similique distinctio tempore. Repellendus quos at suscipit fugiat vel voluptatibus ipsum quasi quae. Accusamus deleniti quod id rem quasi nesciunt ad doloremque. Magni perspiciatis et tenetur voluptatibus illo illum temporibus magni. Dolore ratione vero. Fugit magnam voluptatum quas rem. Eveniet corrupti eius enim aperiam sit. Numquam facere accusamus rem molestias aliquam voluptas.

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