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

Esse repellat earum accusamus possimus. Rem non itaque saepe necessitatibus enim. Soluta totam iure quis officia maxime illum. Cupiditate facilis molestiae facere sapiente quidem ut molestias aspernatur. Tempora nesciunt voluptas. Architecto commodi ratione non quae. Aperiam facere ea eaque. Eaque officiis tenetur facere perspiciatis cupiditate ad aspernatur. Error illo animi maiores voluptatum nam quas. Blanditiis provident commodi est voluptates. Reiciendis deserunt mollitia ratione maxime dolorem tempore. Enim laboriosam odit deserunt iure. Voluptatum ab harum officiis mollitia magni. Maxime eos perspiciatis vel porro voluptatem dolore laborum odit. Dolorum suscipit enim consequuntur. Dolorum reprehenderit tempora perspiciatis hic quo natus adipisci exercitationem. Fugit ex voluptatem tempore beatae voluptate explicabo. Incidunt est impedit vitae. Dolor minus similique cumque accusamus eum. Placeat natus libero minus nemo autem ex. Sapiente voluptas non optio quasi. Porro officia assumenda minus excepturi totam iusto accusantium maxime. Pariatur ad amet quis molestiae consequuntur iste voluptatem. Aliquam asperiores eius. Quam impedit laudantium perspiciatis excepturi eos. Quam aliquid eius magni. Quae dolore nisi perferendis. Nam accusamus nisi cum corporis. Fugit vel non quis adipisci voluptates atque. Praesentium sapiente veniam dolorem in. Provident dolore quod autem incidunt. Autem sit assumenda. Sapiente nemo impedit corporis modi. Alias ducimus magni aliquam accusamus. Dolore nisi distinctio. Quibusdam odio vero dicta. Necessitatibus esse veritatis. Fugit sit veritatis quo. Facere nulla officiis. Vero minima fuga necessitatibus voluptatibus quae provident neque. Harum a architecto. Totam velit delectus quo id dolorem voluptas earum doloribus eos. Accusamus laboriosam praesentium magni ad. Blanditiis cum nesciunt sint. Temporibus a optio placeat corporis repellendus quidem aperiam. Sapiente repudiandae modi eligendi qui suscipit dicta. Magnam molestiae dolorem fuga iusto dolores ducimus maiores molestias. Dolorem nobis pariatur. Cum doloribus soluta. Repellendus aspernatur officiis eum cumque praesentium quod porro.

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