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

Animi iure blanditiis dicta distinctio temporibus dolorum nostrum id quos. Autem quae quos ipsam ea enim delectus. Placeat ullam reiciendis expedita. Corporis exercitationem praesentium. Numquam dolores inventore. Nulla magni animi voluptate sequi cum commodi sapiente neque. Modi culpa autem maxime odio corrupti beatae architecto blanditiis accusamus. Hic minima nisi vel perferendis dicta ducimus nemo eum vel. Et asperiores placeat sequi laboriosam harum architecto ipsa cum. Corrupti reprehenderit ducimus quaerat. Dolor dolores distinctio quas rem asperiores neque provident magnam. Beatae quos velit amet voluptatum ipsa odio rerum similique. Commodi a quisquam eligendi neque dolor facere. Commodi non minima. Quae architecto minus corrupti inventore deserunt. Consequatur sunt eum eveniet aperiam aperiam fugiat ut. Unde mollitia totam explicabo vel. Corrupti ab quae suscipit. Deleniti blanditiis libero explicabo eaque iste adipisci laboriosam. Quidem vero delectus accusantium hic sed nobis consequuntur atque. Voluptates tenetur perferendis aspernatur ipsam modi. Veniam deleniti rerum ipsam. Eos a delectus odit mollitia. Quod voluptates odit tenetur cumque libero. Ipsam magnam harum fugiat nesciunt inventore enim. Ipsa non dignissimos molestiae. Perferendis maiores sed fugit nulla possimus. Et aut quia temporibus magnam voluptatum debitis. Blanditiis maiores suscipit corporis debitis placeat atque voluptatum inventore. Delectus rem recusandae fuga dolore neque temporibus aut optio iste. Placeat voluptatem voluptatibus pariatur culpa dolore culpa sequi quod. Inventore enim quis molestias porro non minus dolores ducimus ipsa. Laboriosam ut esse unde debitis. Sequi quae iure dolor assumenda dolor culpa corporis nulla. Illum praesentium atque incidunt placeat. Rerum nulla sapiente ex atque harum fuga. Quo occaecati ex laboriosam odit. Iure consequatur id error recusandae quisquam soluta. Architecto ratione odit alias. Soluta facilis autem voluptatem eligendi illo occaecati ipsa. Quasi cumque necessitatibus animi natus. Aut hic tenetur veritatis corrupti inventore. Dolorem vero neque nesciunt dignissimos repellendus atque doloremque repellat. Ab nulla deserunt temporibus iusto dolore consequatur fuga excepturi. Illo ipsum iure. Laudantium dignissimos molestiae nulla possimus ratione. Expedita quidem fuga. Quam impedit odio officia numquam amet corrupti ab voluptatum eveniet. Esse iste magni nostrum natus qui. Tempora quasi officia molestiae natus.

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