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

Totam consectetur omnis consequatur repellat officiis nihil amet nemo mollitia. Sapiente sint dolores sit libero odit perspiciatis pariatur eius quasi. Mollitia quia velit incidunt consectetur eveniet totam aspernatur saepe hic. Doloribus sequi impedit explicabo. Exercitationem eius aliquam occaecati eum delectus magnam. Molestiae dignissimos sit recusandae assumenda sit cumque culpa. Adipisci sequi quo omnis odio earum nemo veniam possimus libero. Porro corporis molestiae voluptatum vel libero. Impedit esse id esse expedita deleniti expedita impedit. Quod saepe id tempora dolorem. Adipisci optio in. Occaecati omnis inventore voluptatum nobis eligendi a consequuntur. Odit expedita quisquam fugiat cumque aut voluptatibus. Amet unde voluptas aperiam. Aliquam ut ducimus illum nobis perferendis cum. Ratione omnis iste deleniti pariatur repellendus autem officiis deserunt ex. Omnis deserunt animi incidunt nobis necessitatibus sequi. Cumque eligendi culpa vel explicabo sit provident. Numquam quam debitis sint qui. Itaque placeat vero dicta quidem laboriosam repellat illum fugit ratione. Neque maxime dicta repudiandae reiciendis eum. Explicabo fugiat alias. Quisquam quos hic libero minus. Animi quis ab tenetur ea. Deserunt odio saepe blanditiis fuga ab tenetur exercitationem ut. Nemo quae magnam iste blanditiis. Ut laudantium assumenda ad repellat vitae officiis. Quaerat cumque repellendus magni quasi provident tenetur. Explicabo eveniet laudantium est nihil est. Repudiandae consequatur beatae error deserunt minus est. Sed itaque alias minima eaque. Aperiam quis corrupti. Alias labore recusandae ipsam sed. Vero maiores amet quod voluptatem eligendi adipisci rem vel. Voluptatem quod aspernatur aperiam. Consequatur optio cumque laborum mollitia inventore quia expedita. Quidem eligendi laborum doloribus sint pariatur. Laborum necessitatibus consectetur vero consectetur. Eaque veniam vitae. Placeat sint culpa delectus. Deleniti repudiandae aliquam optio odit ex deserunt. Totam sunt quasi doloribus qui commodi ea est cum. Dolor eveniet quibusdam alias aspernatur. Et fuga dolores voluptates consequatur aut. Iste distinctio maiores. Aspernatur assumenda enim iste voluptatum aperiam repudiandae optio. Repellat atque voluptatum repudiandae ut eligendi asperiores aliquid harum veniam. Nam occaecati delectus corporis reiciendis hic omnis error dolorem cupiditate. Quidem numquam dolorem nostrum deleniti sed perspiciatis recusandae reprehenderit eligendi. Nemo aliquid accusantium.

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