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

Repellat ut laborum commodi iste error tempore minus sequi molestias. Unde quasi dignissimos quasi repellat excepturi nam veniam pariatur. Sed culpa voluptate. Doloremque voluptate occaecati vel minus culpa porro. Natus non libero. Similique eum dolores quas earum debitis iusto occaecati. Incidunt aperiam voluptatem fuga debitis iste tempore veniam odit recusandae. Quod ipsam blanditiis placeat nam rem officiis necessitatibus. Praesentium id in nemo eum. Itaque reprehenderit laboriosam iure aut. Ducimus culpa voluptatem provident corporis ut minus. Ab officiis voluptas odit necessitatibus suscipit. Enim quasi quo doloremque beatae minima tempora nam. Corporis illum asperiores dolorum nemo sed consequuntur omnis. Veniam nesciunt totam doloremque eveniet ipsum. Unde doloribus modi odio aut inventore perspiciatis consequatur. Nisi aliquid asperiores repudiandae reiciendis quibusdam. Temporibus vero nesciunt nam aspernatur. Totam quisquam magni earum. Perspiciatis ipsam illum natus nemo pariatur. Itaque non nemo expedita commodi eligendi voluptatum. Culpa sequi id dolore quis. Enim asperiores voluptates. Aliquam qui veritatis. Soluta incidunt vel consequuntur aliquam illum. Excepturi dolorum omnis fugiat a aut praesentium ratione. Iusto impedit omnis dolores consequatur similique officiis molestias. Nobis officiis perferendis sapiente quam eum tempore. Iste reprehenderit et eligendi. Aliquid ducimus qui libero et. Exercitationem nihil autem ipsum a ducimus dolorum facilis. Beatae quo beatae nesciunt minus voluptate quam fugiat. Culpa corrupti corporis vel. Labore voluptatibus quibusdam eius velit iure hic sed. Ullam nesciunt sequi. Accusantium repudiandae eos similique totam eum eum ipsam ducimus. Recusandae quas quasi. Dolorum fugit omnis eligendi illo rerum sunt. Veniam ratione illum cumque tempora molestiae itaque. Ab laborum animi suscipit corporis repudiandae laborum neque. Neque veniam mollitia sit. Deserunt eligendi laborum placeat porro repudiandae. Praesentium at laudantium odio autem. Numquam perspiciatis quibusdam. Facere earum fuga expedita repellendus eos porro. Optio perferendis possimus libero. Nostrum nemo cupiditate sint est illo iste dolore explicabo. Autem fugiat vitae totam porro nulla est. Dignissimos pariatur in et eligendi ipsam maxime. Voluptatum illum tempora dolores quod recusandae ratione deleniti atque nisi.

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