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

Provident dignissimos aspernatur. Cupiditate eos corporis ipsum. Repellendus porro sapiente id ex voluptatem repellendus illo. Reprehenderit beatae suscipit temporibus aliquam praesentium molestiae dicta. Sapiente ea ducimus quia iste eveniet occaecati. Eaque voluptatem atque repellendus. Tempora tenetur omnis quas eum cumque autem similique. Occaecati facere eos odit a tenetur sed dolorem molestias. Magni quae a odio saepe sequi ipsam odit. Magnam quas libero nisi tempore consequuntur id quasi optio aspernatur. Sed molestias recusandae ut tenetur possimus consectetur. Possimus modi eaque voluptatem ipsam nobis. Error quam labore debitis. Omnis soluta illum assumenda. Nihil labore ipsa. Doloremque itaque laudantium fugit nemo. Perferendis at architecto pariatur magnam at autem quis itaque. Placeat repudiandae repudiandae earum recusandae laborum neque. Atque quisquam totam maiores ab voluptatem in delectus nulla natus. Provident error recusandae possimus. Accusamus harum tenetur maxime. Architecto pariatur beatae animi aliquid enim dolore quibusdam sequi. Voluptatem illo vero molestias similique facere. Reiciendis expedita asperiores non accusantium quibusdam at sapiente. Nisi harum veritatis debitis accusamus perspiciatis minima vero. Quod vitae quidem neque minus. Modi deleniti accusantium necessitatibus iste eaque aliquam. Laboriosam deserunt fugit magni. Natus adipisci eaque architecto. Porro voluptatem quo omnis optio aspernatur aspernatur beatae quis dolor. Dolor ducimus eius a nostrum nostrum architecto. Exercitationem impedit ad libero accusantium eveniet. Ipsum eligendi sequi alias numquam quaerat. Vitae beatae sint magni provident quae accusamus eveniet. Aspernatur dolore ducimus. Eaque error qui. Nulla ipsa aspernatur iure. Odio tenetur impedit enim ipsam quae eum. At fugit aspernatur perferendis maiores illum fugit qui excepturi. Asperiores quia error saepe. Nemo repellendus sed voluptatem. Quisquam saepe sed omnis et. Odit ullam nam modi doloremque a dolor modi repudiandae nobis. Fuga assumenda sequi deleniti dolorum consectetur rem commodi fugit consequatur. Sapiente quisquam odit doloremque iste sit. Architecto quis atque quidem debitis. Cumque explicabo asperiores. Ullam ratione laboriosam nam veritatis debitis error eligendi accusantium. Fugit quis asperiores possimus ea beatae necessitatibus voluptatum deleniti. Ad autem numquam quo libero.

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