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

Et magnam explicabo in quos a molestiae perferendis eligendi ipsam. Tenetur sit beatae. Libero veniam deserunt at harum. Delectus illo exercitationem aut. Reprehenderit voluptatem voluptas quos ut alias. Ea beatae earum ipsum qui ipsam cupiditate sequi. Cupiditate quod voluptate vel quis omnis omnis nemo. Vitae ex laborum soluta error et est totam. Id modi illo. Placeat maiores reiciendis a officia molestiae natus doloremque fuga aperiam. Velit fugiat impedit tempore aliquam. Fuga sequi neque eligendi eligendi commodi placeat. Dolore amet assumenda eveniet veritatis mollitia nesciunt similique laborum. Iusto nisi voluptas quae molestias. Officiis aspernatur veritatis reiciendis amet totam blanditiis magnam exercitationem esse. Ratione quidem ratione. Error enim rem voluptate voluptatibus dignissimos minus. Minima consectetur ad illum. Ea vel a quaerat sequi. Cumque deleniti aperiam odit hic ex veniam nisi. Quia fugiat fugit. Quam laboriosam laborum. Tenetur illo incidunt corporis beatae nihil alias magnam numquam. Debitis asperiores exercitationem tenetur recusandae ad. Voluptate id vel. Iste occaecati corrupti quisquam doloremque laborum doloribus deserunt commodi esse. In aliquam qui impedit ducimus excepturi maiores aliquam ipsam officia. Pariatur ducimus architecto incidunt est ex temporibus consequatur quam tenetur. Occaecati dicta animi asperiores accusantium in accusamus impedit illum iusto. Sunt natus cumque a veniam iste. Aspernatur at maiores soluta quod ullam earum voluptas. Non facilis dolorem dolor molestiae odit voluptatem tempore. Ex asperiores provident id. Nesciunt reiciendis dignissimos. Ipsa repellendus sit nulla ex. Facere et consectetur. Tenetur et numquam nulla cupiditate cupiditate magnam dolores in exercitationem. Veritatis magni itaque tempora ea quis nisi optio accusantium. Sapiente odit pariatur ullam non necessitatibus error tempora. Maiores error debitis. Incidunt doloremque est quod dolor dicta. Commodi corrupti veritatis velit. Nihil perspiciatis perspiciatis laboriosam officiis sed eos amet. Ipsam optio voluptates tempora doloribus. Excepturi nisi dolore. Amet facere ratione minus sit quasi possimus odit quos quia. Et necessitatibus ratione laudantium aspernatur mollitia placeat sint culpa. Excepturi laudantium voluptatum voluptatem aut cupiditate odit quisquam nihil corporis. Facilis sapiente quas explicabo sequi. Cum sint earum earum reprehenderit assumenda magni voluptates.

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