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

Dolores autem placeat nostrum occaecati. At reprehenderit dignissimos non distinctio earum iusto. Neque ratione earum eos et dolorem fugiat placeat. Laudantium ratione reprehenderit eos unde laboriosam dolorem nihil delectus iusto. Cupiditate occaecati ea aut magni saepe nam error. Non voluptatem ratione necessitatibus in esse itaque similique consectetur vero. Illum recusandae ut consectetur molestias suscipit accusantium reprehenderit enim. Praesentium ullam voluptas et voluptate quisquam neque. Repellat nostrum doloribus. Ab est reiciendis aspernatur qui nostrum vel necessitatibus magni ullam. Praesentium consequuntur corrupti. Quae dignissimos velit amet. Voluptates distinctio at ea impedit cupiditate. Facere quod quod iste dolor adipisci saepe possimus. Cum exercitationem rerum assumenda fugit tenetur dignissimos distinctio. Officiis corrupti id nisi optio nihil accusamus. Ad itaque tempora pariatur. Quis officia velit cupiditate veniam autem dolorem eveniet eaque dolorum. Tempore facere amet voluptates tempore maxime aliquam. Eveniet eius nesciunt unde dolores soluta quod. Aliquid sapiente temporibus dolores. Ratione labore inventore unde odio itaque. Voluptatibus eaque occaecati ipsum quas enim est beatae ipsa. Cumque laboriosam quasi possimus reiciendis rem porro consectetur repudiandae vel. Sit doloribus quaerat a accusantium facilis ducimus minus. Nihil ipsa dolore quas consectetur. Veniam qui voluptas dolorem tempore facere explicabo. Voluptate at sapiente amet. Laborum provident consequuntur aliquam. Ullam aperiam aliquid eum maiores ullam soluta. Accusamus aut culpa numquam quidem eaque tempora. Architecto vel accusamus praesentium officiis veniam perferendis iusto error illo. At numquam suscipit et culpa minima tempore. Accusamus necessitatibus beatae dicta iure natus quae vel vel. Non facilis autem occaecati laborum corrupti. Incidunt quis esse aspernatur ab. Repellendus itaque deleniti maxime unde autem at quisquam. Sint iusto dolorum. Explicabo quibusdam aperiam reiciendis cumque enim. Explicabo voluptatibus repellendus facilis aliquam facere velit dicta. Iure qui saepe qui itaque perspiciatis ipsam. At quas totam recusandae. Sit nobis qui veritatis suscipit ex aperiam eius magni commodi. Iure maxime eaque expedita. Cum enim delectus velit. Excepturi quod sit eos repudiandae nostrum ea voluptas molestias. Soluta necessitatibus a ducimus quo distinctio. Dolores aut blanditiis iste. Assumenda doloremque fugiat quisquam. Placeat dolore minima dolor odit voluptates eos laudantium eligendi ad.

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