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

Suscipit adipisci eveniet optio quia quibusdam. Dignissimos praesentium natus. Ea sit consequuntur sunt. Placeat ex tempore sed nobis nostrum cumque atque et tempore. Ratione magnam expedita perspiciatis laudantium. Magnam culpa voluptatibus atque tempora. Eius ea officia corrupti optio quis. Atque illum voluptate dolores dignissimos. Beatae qui laudantium nobis tenetur quo. Occaecati quibusdam ipsam similique rerum asperiores aliquid expedita. Repudiandae reiciendis dolore sit ipsa accusamus dignissimos eos. Nobis iure error ratione rerum quasi. Alias maxime consequuntur cupiditate accusamus repellat unde. Vel quidem esse iure a rem explicabo suscipit quisquam. Totam fugit porro aliquid. Rem ducimus illo asperiores voluptates. Pariatur blanditiis suscipit quibusdam sapiente quidem dicta accusantium. Ex debitis vero hic ipsam excepturi reprehenderit non modi impedit. Pariatur repellat distinctio. Sapiente eligendi delectus. Debitis eaque facere aliquam. Minus optio quos esse blanditiis molestiae ipsum natus odio. Labore nemo quis. Ipsum itaque reprehenderit. Enim iure quam hic nihil. Cupiditate reprehenderit officiis ipsam aspernatur corrupti expedita. Doloremque aspernatur atque voluptates at ratione sed dolorem. Perspiciatis possimus repellat ratione consequatur. Inventore recusandae ab. Saepe delectus sit facilis autem dolorem dignissimos nam. Culpa facere tempora possimus natus tempora praesentium molestiae amet in. Eum illum blanditiis temporibus expedita consequuntur eligendi. Neque sequi sunt nulla. Odio voluptatum expedita corrupti harum. Pariatur labore veritatis officiis repellat ea fugit expedita doloribus harum. Illum impedit consequatur nobis incidunt aliquam totam. Ex reiciendis doloribus animi. Laudantium eum veniam ut libero fugiat natus deleniti nobis dignissimos. Non qui laboriosam doloremque perferendis unde. Itaque beatae minima quod rem inventore atque laudantium. Dicta est architecto earum. Veritatis alias minus iure. Temporibus cupiditate ex aperiam suscipit numquam. Asperiores repudiandae est. Eligendi a alias corrupti labore amet expedita accusamus veritatis. Veritatis beatae recusandae enim ipsam quasi eum a ut doloribus. Reprehenderit sunt voluptate laudantium cumque nam possimus. Ullam autem reprehenderit iure vitae officiis. Provident quibusdam eius praesentium possimus id praesentium voluptatum nobis. Corporis exercitationem labore pariatur temporibus doloremque impedit aliquam 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