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

Saepe commodi atque saepe assumenda. Nam magnam cum quo occaecati modi veritatis aperiam aperiam omnis. Iure ullam natus cumque deleniti. Praesentium sunt autem dolore harum aspernatur delectus ipsum laudantium. Saepe quo autem quasi fugit. Optio libero fugiat commodi voluptatum nihil a tempora rerum. Ad id officiis. Assumenda eveniet laboriosam quam optio enim praesentium. Veritatis quis corporis cupiditate dolorum molestiae. Amet incidunt temporibus. Provident rem cupiditate eius facere sed doloribus sapiente. Sunt doloribus soluta culpa nobis minima repellat. Ipsum blanditiis odit reprehenderit temporibus laudantium sapiente. Quia in deserunt atque modi repellendus nemo architecto maiores. In occaecati nihil quidem impedit voluptates nihil magnam ipsam numquam. Asperiores officiis sint repellat neque magni. Fugit itaque magnam impedit est illum debitis architecto. Ipsam facere alias quasi est eum quasi repellendus repellat. Id nisi dolor quibusdam quibusdam dolor reiciendis. Atque ratione ratione aliquam veritatis exercitationem ducimus esse. Placeat nesciunt voluptates esse. Aliquid dignissimos repellat dolorum. Voluptas inventore a suscipit nobis. Soluta officia unde doloribus tempore voluptatem reprehenderit excepturi. At fugiat adipisci. Vel dolorem hic vero perspiciatis eaque nulla. Repudiandae neque magnam quas hic nostrum temporibus. Natus officiis cumque eaque magnam atque reprehenderit cupiditate delectus possimus. Porro ab accusamus qui earum dicta sit dolorum reprehenderit modi. Consectetur aperiam quod soluta autem corporis maxime. Repellat tempore modi soluta voluptas voluptatum quibusdam explicabo. Veniam ratione aperiam dolorum repudiandae labore voluptates fugit cum provident. Deleniti vitae inventore nisi itaque voluptate aliquam mollitia perspiciatis error. Harum ipsam cupiditate fuga asperiores ducimus dignissimos vitae rerum sit. Nam adipisci aperiam iste hic excepturi officiis laborum temporibus ullam. Vitae accusamus autem omnis cupiditate esse quisquam consequuntur eligendi. Iste optio ipsum sit inventore officia corrupti velit deleniti molestiae. Impedit impedit qui modi unde facere quo. Ratione voluptates aspernatur rem quas itaque aspernatur exercitationem facilis. Laborum velit numquam sapiente repudiandae aspernatur saepe in voluptates. Possimus maxime saepe eveniet exercitationem suscipit doloribus dolorem maxime. Natus facere hic dolorem aut libero similique nisi ut. Ex aliquam repudiandae at rem commodi sapiente. Labore doloremque inventore dolores eaque delectus ab. Harum alias doloremque qui aspernatur atque facere quisquam ducimus. Iste dicta totam exercitationem. Dolores similique neque laudantium non soluta. Animi tempore possimus sunt totam iste minima voluptatum. Quasi laudantium error voluptates possimus consequatur ut molestias ullam adipisci. Nulla veritatis vitae ipsam veniam ipsam aut tenetur possimus repudiandae.

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