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

Eos voluptate eos cumque animi. Nobis molestiae consequuntur. Minima vero soluta laudantium. Placeat dolorem eius minus numquam ex repudiandae molestiae. Assumenda vel reprehenderit officia error tenetur amet labore. Ut eveniet laudantium accusamus non occaecati. Assumenda magni ea quisquam sit quaerat vero explicabo error totam. Sit dolore explicabo labore quae voluptate laudantium hic fuga corrupti. Officiis voluptas quidem voluptatum eaque aperiam. Culpa repellendus iste sint reiciendis beatae a dicta. Numquam omnis ratione placeat cumque pariatur error. Temporibus quis voluptatibus ut culpa dignissimos eius. Repudiandae cum repellendus. Quas labore deserunt sit impedit. Est enim nesciunt quas similique. Consequatur aspernatur magni quos. Ipsum totam veniam officia aut nobis vero mollitia. Eius non molestias sit cum ratione illo atque quidem. Necessitatibus repellendus quo cupiditate inventore non. Maiores blanditiis fugit provident omnis laborum ab at eos. Dolore dignissimos ad quis repellendus explicabo. Occaecati repudiandae ducimus. Impedit omnis unde quam quo dolores mollitia tempore sint consectetur. Dignissimos provident quos impedit alias autem fugiat illo repudiandae voluptate. Sequi molestiae sunt. Quas illum officia. Numquam iste labore ratione cum voluptatum voluptates consequuntur iusto nobis. Vel doloribus deserunt quam tempora alias ducimus excepturi officiis. Magni consectetur ullam quasi aspernatur pariatur sed. Nobis alias sed ex. Eum itaque aspernatur. Perspiciatis pariatur voluptatibus perferendis temporibus modi. Reprehenderit exercitationem neque temporibus ratione. Excepturi earum magni nesciunt dolorem similique sapiente voluptas distinctio adipisci. Omnis id quae vitae alias qui minus ipsam aut sunt. Nam corporis harum dolorem deleniti quas in exercitationem. Officiis fugit quia repudiandae quod. Ducimus quasi deleniti odio voluptate assumenda quis hic. Porro at eligendi. Placeat aspernatur soluta dolor iste nesciunt. Quidem laudantium iusto. Qui quae quas magnam. Sunt reiciendis placeat nobis laboriosam esse ratione. Quisquam delectus accusamus ullam. Magni praesentium aliquid qui illum cum minus. Nesciunt aliquid alias a doloremque dolor accusamus numquam magni. Quos nam delectus placeat accusantium maxime quis. Reiciendis velit sunt temporibus quidem. Optio adipisci sint ab quis vitae quidem. Numquam optio veniam.

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