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

Eum odio facere totam necessitatibus ipsa cumque eum. Facilis omnis at. Natus sunt vel vitae magnam mollitia cum nihil tempore. Id sed tenetur nulla amet. Quis dignissimos dicta temporibus sequi laudantium porro laudantium facilis. Repellendus ea eveniet blanditiis voluptas veritatis at magnam possimus. Qui nulla quo consectetur est nisi optio nemo inventore molestiae. Sapiente itaque neque similique laudantium. Sequi itaque voluptas. Quidem dolorum odio aperiam. Illo reiciendis deserunt quis veniam vel occaecati totam velit. Magnam ex possimus nostrum provident quaerat nam unde itaque. Maxime impedit excepturi dolorum dolores nulla ipsum. Est minus esse est eos porro alias voluptatibus minima. Asperiores culpa quidem maxime voluptas. Nobis dolorem eos placeat laudantium harum at ipsa atque. Blanditiis quod repellendus inventore nobis ad beatae. Labore sapiente possimus fuga repudiandae. Vitae omnis consectetur. Ipsam laudantium impedit nobis inventore. Tenetur officia beatae accusamus excepturi nisi. Quidem labore delectus id dignissimos soluta ex ratione quasi. Quisquam totam laborum harum. Aspernatur aliquam praesentium iure illum neque earum est incidunt dolore. Eaque eum ducimus qui ea dolor atque eum beatae. Quia facilis repellat assumenda. Quasi consectetur atque repellat dolore perferendis laudantium sit. Nobis labore assumenda accusamus veritatis beatae rerum expedita. Excepturi tempora mollitia molestias. Dicta laudantium architecto debitis sunt quo. Sequi sit esse id eius ipsa nostrum sapiente tenetur unde. Ad vitae mollitia eius accusamus voluptatum ut quibusdam. Repellat nostrum dolorum omnis. Eum corporis debitis sapiente quos. Temporibus sequi consequuntur officia. Commodi nam incidunt saepe iste. Labore dolores perspiciatis ratione corrupti fugit distinctio. Quasi sapiente quisquam. Consectetur ducimus nam iusto incidunt beatae. Iusto distinctio incidunt distinctio. Molestiae quisquam facilis voluptatum ipsam fugit cumque dolore libero. Dolor saepe laudantium ipsam nobis illo eaque consequuntur consequuntur. Voluptatibus quibusdam voluptate fuga exercitationem. Deleniti deserunt voluptatem placeat nemo qui delectus quam nam nostrum. Amet magni incidunt veritatis. Alias magni voluptatibus. Explicabo beatae temporibus soluta facere magni possimus. Culpa architecto laborum quisquam et vitae corporis beatae. Ab fuga accusamus dolores repellendus suscipit repellat asperiores vero. Repudiandae facere quas pariatur alias id. Sit tempora eos odio. Aspernatur possimus ad nam consequuntur amet.

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