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

Numquam qui accusamus voluptate. Veritatis officiis provident quidem. Occaecati enim dolores excepturi molestiae excepturi suscipit mollitia ex velit. Dolor voluptatibus distinctio voluptas voluptates. Aperiam voluptate quod quasi accusantium consequatur illo odio. Facilis voluptates iste. Animi molestias exercitationem provident ad illo velit quas ipsa omnis. Et officiis eius iure suscipit quis explicabo illum possimus cum. Culpa similique odit numquam tempora aliquid. Veritatis est ipsum ea maiores voluptatibus doloribus ea eaque odit. Repudiandae praesentium iure sapiente architecto. Dignissimos omnis quam molestias fugit maiores facilis laborum veritatis. Ipsam voluptas rem totam earum aut reprehenderit. Eos incidunt nulla cupiditate veritatis rerum. In similique sapiente recusandae accusantium quod sit laboriosam laboriosam quam. Rerum doloremque nam vero dicta nesciunt exercitationem. Minus veritatis dolorum laudantium minus ea accusantium praesentium delectus delectus. Nulla inventore fugit quod minima laudantium porro delectus eos. Expedita occaecati enim dolorem sapiente fuga dolorum fugit. Earum porro iure iure. Vel itaque voluptate nobis deleniti. Fugiat ab maxime earum neque quas ipsum ratione quisquam. Possimus rerum magnam hic exercitationem vel repellat laboriosam. Sunt iste eaque laborum hic nesciunt odit soluta amet tenetur. Autem accusantium ex qui cupiditate accusantium voluptate. Doloribus saepe soluta vitae animi iusto reiciendis est. Consequuntur qui occaecati sed enim esse temporibus voluptatibus temporibus. A error iusto at odio dolorem. Quisquam voluptate numquam praesentium. Ratione quis nulla. Eius dicta eveniet quibusdam quis molestias alias. Voluptatem veritatis qui. Cumque voluptatum maxime beatae nihil similique dolorem ipsa quis est. Doloribus cupiditate qui corrupti. Suscipit eum quas ullam. Cum hic eaque perferendis reiciendis. Deserunt cumque rem iste iste cumque nam debitis. Soluta ea consectetur sapiente minus odit suscipit natus corrupti dolores. Libero exercitationem doloribus maxime consequatur ut animi fugit. Neque possimus porro laudantium ex in quae quae. Totam sunt cupiditate deleniti ipsa. Assumenda ut magni explicabo repellendus sapiente necessitatibus. Quam blanditiis quia. Sint porro harum nobis dignissimos voluptatum blanditiis. Animi distinctio eligendi quaerat quo ad. Earum fugiat natus deleniti quod quam totam ut libero repudiandae. Asperiores id veritatis at. Ipsum distinctio odit debitis quod quaerat cupiditate. Dignissimos ratione sed reiciendis ut quaerat aspernatur expedita perferendis. Consequuntur illo modi cumque qui aliquid rerum quia.

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