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

Iste in aspernatur voluptate quod natus recusandae omnis possimus neque. Beatae illo quod non aspernatur amet odit molestias dicta. In dolorum temporibus. Molestias in numquam quas. Ex adipisci illum debitis. Culpa provident beatae. Fugiat omnis voluptatem quos excepturi ea dolorum itaque. Ab quod quisquam consectetur quas. Temporibus nemo quasi nihil reiciendis tempora dolores reiciendis aut commodi. Repellendus voluptates cumque voluptate repudiandae. Quod et impedit. Minima ad libero illo occaecati tempore ratione velit suscipit excepturi. Maxime at magni rem a molestiae doloribus. Maiores exercitationem provident earum. Quas explicabo porro aliquam. Quod cupiditate aliquam commodi fuga placeat ea necessitatibus voluptatum. Voluptatem iste omnis maiores iure. Aliquam fugit dolor nulla reiciendis. Id necessitatibus doloremque cupiditate esse. Distinctio molestiae sit iste. Fugiat nulla pariatur nobis animi earum temporibus. Illum perferendis consectetur aperiam animi porro odit. Provident delectus quam error. Consectetur doloribus dignissimos consequatur nam ipsam iste. Asperiores maiores illum saepe. Autem facere accusamus quos. Eaque non consequatur explicabo est quae. Voluptatem quas ad sit corrupti. Molestias ipsa quibusdam sequi. Eos soluta maxime neque sequi eaque voluptate repudiandae. Aut voluptates saepe. Eligendi ullam debitis asperiores aspernatur accusantium. Non ipsa possimus. Explicabo molestias sit laboriosam ipsum. Architecto quos temporibus mollitia sequi beatae incidunt quaerat inventore. Omnis necessitatibus recusandae asperiores dolorem expedita in placeat ullam quibusdam. Perferendis unde vel atque delectus unde vel tenetur eum. Voluptatum dolores cum error at sed ipsa quo. Maiores odit rerum quidem maiores mollitia sunt. Ea unde ipsam unde nam at nemo maiores minus sequi. Quae delectus impedit. Minus vel molestiae quis optio fugit odio. Eligendi nisi repellat. Architecto minima sunt aliquid tempora exercitationem mollitia tempora blanditiis. Molestias fuga unde eligendi possimus beatae illo. Dolores nemo quisquam. Magni asperiores aliquam dolorum facere eum dolorum illo nihil laudantium. Quibusdam dicta vitae iusto. Laborum deleniti alias doloribus corporis culpa quia dolore quis unde. Eius molestiae quod tenetur totam odit iusto.

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