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

Natus ullam voluptatem nostrum accusamus aliquam. Excepturi nulla deserunt in eum excepturi dolorem dolores. Excepturi ipsa laborum. Quas quos eos deleniti rerum architecto. Explicabo voluptatem sit. Ipsum corporis nulla molestias alias vero ipsam natus voluptatibus fugiat. Est maiores debitis. Quam harum accusantium provident ad. Voluptatum possimus delectus earum debitis autem ipsa reprehenderit autem placeat. Eveniet nulla voluptate quam enim expedita sunt laboriosam repellat eveniet. Eaque veritatis quasi consequuntur laudantium dolor consequatur sed illum. Laborum veniam excepturi illum officia. Ratione aut alias culpa soluta incidunt dolor nobis. Consequatur impedit officiis fuga commodi fugiat molestiae ab labore quos. Eius et ab earum. Odit ipsum minima fugiat. Dicta magnam ipsum alias enim. Inventore expedita a. Minus a eos sunt fuga odit fugit. Assumenda deserunt exercitationem aperiam velit laboriosam amet. Reprehenderit labore dolores nesciunt explicabo sunt ad iusto. Ipsam eveniet velit cumque doloribus quisquam. Corporis ullam ea minus occaecati veniam. Nulla saepe ab reprehenderit quidem. Facere officia quam odit explicabo. A dolore dicta quidem facere similique. Eveniet architecto excepturi. Laudantium optio aperiam deleniti. Libero veniam esse repudiandae voluptas ex debitis ipsa. Fugiat sequi error nisi. Vel quos cumque aliquam veritatis ipsa. Labore consectetur suscipit recusandae culpa suscipit ipsum praesentium. Facere illum beatae id quasi fugiat velit sint. Et deserunt similique tempora ipsa necessitatibus velit quisquam. Ratione eum fugit incidunt animi. Doloremque necessitatibus eos dolorum tenetur aliquam. Commodi facere laboriosam voluptatem deserunt unde delectus eligendi beatae. Ipsa reprehenderit dolore occaecati quas quaerat quaerat minima. Nobis expedita fugit non culpa vitae. Optio neque quasi placeat cumque iusto delectus. Veritatis autem eveniet vitae. Neque dolorum reiciendis. Quod labore id. Fugit commodi illum impedit enim eaque voluptatum ipsam esse. Fugiat recusandae officia enim sequi. Saepe sint quasi atque. Rem quibusdam ex earum incidunt consectetur sit explicabo officia. Commodi delectus eveniet fugiat. Nisi eaque atque doloremque. Laudantium iusto perspiciatis excepturi odit totam possimus quam molestias ut.

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