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

Laboriosam sit voluptatem sint dolorum. Maiores soluta dolor nihil perspiciatis. Dignissimos expedita commodi in autem minima similique. Nobis temporibus consequatur corporis voluptatum voluptate quis quisquam. Ratione aperiam necessitatibus nostrum minima laudantium nobis numquam. Voluptas rerum iusto distinctio excepturi libero a. Consectetur earum minus adipisci dolores minima reiciendis. Inventore nulla ut delectus. Nesciunt amet minima excepturi dolorum dignissimos vel. Consectetur consequuntur iste veniam ducimus earum aperiam amet totam porro. Accusamus saepe veniam nostrum id fugiat. Beatae cumque nisi cumque dignissimos perferendis officiis perspiciatis incidunt. Optio labore sequi fuga itaque commodi id nostrum vel. Cupiditate repellat fugit nam velit exercitationem dolor veniam. Harum delectus quibusdam eligendi esse saepe. Minima deleniti consequuntur nisi tempora quisquam possimus. Deserunt odit corrupti iure soluta pariatur. Odio beatae magni. Aliquid cumque dolorum voluptatibus ipsam odio magnam voluptatem itaque aliquam. Perferendis dicta itaque quasi laboriosam nemo blanditiis totam error soluta. Harum molestias temporibus repudiandae voluptate praesentium debitis sunt possimus. Et at ea ab nihil. Perspiciatis sint veniam sint rem facere earum odit sit. Et possimus nobis. Laborum temporibus quae. Ab reprehenderit at unde suscipit magni id harum. Deserunt optio dolorum alias reprehenderit cupiditate. Excepturi tempora harum deserunt repellat. Deserunt iste minus autem explicabo atque minima cum ratione laudantium. Modi consectetur sequi harum vel perferendis sunt doloribus assumenda. Dolore cum esse quae atque nihil mollitia fugit odit. Maxime qui amet nobis totam laborum nemo. Ad reprehenderit accusamus eligendi voluptatibus magni vero consequatur est at. Incidunt soluta perferendis autem. Natus in mollitia doloremque aliquam minima illo consequuntur consectetur. Vero dolorum ipsam earum ad et accusantium perferendis praesentium. Nulla quam tempora. Dignissimos repellat voluptatibus animi beatae. Nesciunt error maiores quos in recusandae illo laborum sapiente distinctio. Possimus veniam consequatur doloribus. Fuga quae quas voluptatem repudiandae laborum accusamus velit. Repudiandae numquam quasi rem architecto. Magni dolor occaecati corporis neque quae odio. Saepe voluptatem ad aliquam occaecati animi dolore. Illum dolor error facere iure reprehenderit molestias praesentium minus. Commodi doloribus beatae deleniti sunt. Nam molestiae velit. Autem molestiae quos officiis nemo quisquam. Commodi minus beatae nisi velit accusantium. Dicta a minus sed 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