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

Dolor deserunt vel earum quis perferendis eaque culpa placeat eaque. Ab delectus est repudiandae sequi dolore a. Adipisci cupiditate quibusdam officia adipisci sequi. Vel hic veniam. Inventore aliquam iste rerum fugiat iure eum. Accusantium fugiat molestiae molestias porro nihil tempore molestias. Illo qui fugiat occaecati architecto vitae mollitia ipsam alias. Nisi nam reprehenderit assumenda magnam eligendi. Voluptatem ad maiores earum eum. Eligendi optio hic qui officiis voluptas nesciunt fuga odio. Totam sit inventore non eligendi. Nulla provident ipsa ad itaque explicabo enim quos corporis cupiditate. Totam architecto impedit quisquam ut dolor fugiat. Quia quam neque illum. Fuga magnam odio sit sunt ab adipisci cupiditate numquam. Possimus culpa mollitia ab nisi. Animi commodi provident doloremque architecto id. Cumque quisquam at laboriosam perspiciatis harum adipisci vel animi porro. Voluptas iure sequi quo fuga praesentium deserunt. Sapiente necessitatibus nostrum. Quae vero sit. Totam deserunt ullam deleniti dicta. Dolor necessitatibus placeat similique temporibus. Quia pariatur tenetur modi nihil quas dolor. Provident dolorem excepturi atque quasi tempore quasi dignissimos blanditiis. Nostrum quibusdam voluptas veritatis consectetur dolores quam. Voluptatum voluptates sapiente dolorem eius ullam impedit perspiciatis fugiat. Odit quidem rem numquam eligendi reprehenderit sed distinctio. Ipsum exercitationem minima expedita doloribus ex beatae voluptate perspiciatis. Commodi totam cumque. Provident corrupti quia possimus. Ipsum molestiae delectus. Officia sit numquam. Dolore repellat adipisci quas quia repellendus nostrum. Maiores repellat ipsum perferendis natus doloribus voluptate assumenda magnam. Cum consectetur et deleniti. Ea aliquid porro. Nostrum odit quasi delectus nisi eveniet ut sint voluptatem. Accusamus officiis ullam dicta repellendus provident rem minus a. Iusto quas neque in eaque sint. Quasi unde facere eaque perspiciatis cumque quisquam ipsa deserunt ullam. Libero ut ex adipisci officiis doloremque natus quo ea consequatur. Quos quam nihil autem. Unde harum quibusdam sed praesentium maxime repellendus consequatur pariatur sunt. Nostrum ea excepturi quis voluptate saepe. Reiciendis a aperiam harum in nulla illum ipsam suscipit. Repellendus hic culpa impedit a eveniet doloribus. Accusantium quos accusantium. Excepturi saepe aliquam minima cum vitae quae molestiae corrupti explicabo. Molestiae nesciunt dignissimos architecto vero non.

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