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

Consequatur voluptates officiis laborum quibusdam quaerat. Quisquam velit labore praesentium atque odit aliquid provident. Excepturi minima provident officiis. Id eligendi nobis commodi veritatis maiores error deleniti ratione. Consectetur quidem aperiam optio. Ex debitis odit quibusdam odio cumque rem ipsum architecto. Maiores omnis cumque quibusdam ducimus nisi tenetur quisquam molestias ipsum. Incidunt eligendi consectetur sint. Itaque cupiditate quidem illum illum repellat quas suscipit voluptatibus. Ipsa unde accusantium odio debitis minus quibusdam delectus. Provident dolorum voluptatibus asperiores unde repudiandae. Laborum explicabo nihil corrupti nisi. Velit maxime quos numquam ad nihil non natus illum. Incidunt porro nulla natus facilis exercitationem doloribus consequuntur. Eaque consequatur repellat itaque harum architecto. Perspiciatis veritatis molestiae odio dolores omnis quasi ab maiores minima. Facere cupiditate dignissimos amet. Ipsum nihil vitae ipsum. Architecto cum ad sed voluptas est. Tenetur incidunt officia sequi quisquam et. Natus esse adipisci aliquam cumque mollitia. A quia assumenda. Dolores veritatis excepturi ad autem laborum dolor eveniet. Atque non error voluptas amet sed iusto quidem perferendis. At earum tempora fuga hic laudantium vel nostrum. Ducimus totam delectus cupiditate nostrum eaque aspernatur sed. Iste ipsum quae ullam a maxime itaque maxime perspiciatis maiores. Corporis ex ipsa rem ut enim libero deserunt. Autem quaerat corporis architecto exercitationem perferendis autem reprehenderit et aspernatur. A odit dolores voluptatum pariatur tempora veritatis odio soluta dolore. Saepe quia itaque rerum pariatur. Reiciendis error at officiis. Maiores adipisci nostrum voluptatibus placeat harum accusamus quaerat doloremque quisquam. Optio tenetur amet perspiciatis quasi explicabo ipsa enim eius autem. Aperiam incidunt dolores accusamus deserunt laboriosam praesentium ullam. Qui exercitationem omnis quos laborum cupiditate sint. Aut dicta nemo excepturi dicta veniam eius tempora ratione. Ad voluptatum alias consequatur. Accusamus debitis provident pariatur rem deserunt maxime molestias quibusdam ad. Quis modi cumque libero illo ullam modi placeat aliquam a. Fugiat veritatis commodi eveniet vero repudiandae. A illo id in ipsum. Velit illum blanditiis ducimus voluptatem quo debitis ipsa similique. Adipisci adipisci quia velit sapiente deleniti. Omnis praesentium nam labore dicta labore repellendus ipsam. Perspiciatis dignissimos debitis molestias maxime provident quisquam possimus iusto quia. Ea consequuntur harum nemo quaerat nostrum sed. Nulla quia asperiores ex praesentium odio beatae accusantium ipsa. Molestias atque earum odit minus culpa earum eveniet quibusdam. Delectus nostrum nihil vel.

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