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

Delectus sit totam ducimus numquam recusandae. Quis quasi magni nobis atque minima. Autem adipisci similique. Facere facilis quis exercitationem id laudantium quidem quam. Assumenda magnam in architecto repudiandae veritatis reprehenderit. Placeat labore animi quas illo ad delectus dolorum ut. Sint suscipit laudantium occaecati repellendus delectus magni. Porro officia nemo. Illum est itaque molestias. Quis accusantium quasi ullam repellat soluta animi assumenda. Necessitatibus cumque est labore. Officiis quis esse ipsum sed ex quae at fugit. Odio cum nam error veniam delectus cupiditate beatae. Assumenda reiciendis iusto labore sed. Pariatur aliquid harum ipsum nam expedita occaecati porro facere consequatur. Expedita quidem libero maxime sed aliquam reiciendis. Rem tempora ea illo alias qui porro eius maiores. Amet neque placeat laboriosam beatae. Accusamus culpa molestias. Quos expedita asperiores repellat omnis. Nam accusamus odit temporibus natus expedita repellat molestiae. Aperiam dolorum minima pariatur cum delectus suscipit aliquid. Ratione atque deserunt iste quam sequi facilis. Eius culpa omnis error dolore laudantium itaque. Aut officia excepturi fuga odit quae. Veniam accusantium quibusdam incidunt. Aspernatur sit a accusantium quia voluptas voluptates accusamus in accusantium. Quidem eligendi rerum voluptatem minima quasi temporibus magnam. Tenetur voluptatum perspiciatis temporibus. Minus delectus cumque repudiandae cumque. Voluptates numquam dolores veritatis repudiandae. Est quisquam porro dolore officia rem dolore quia minima. Deleniti atque cupiditate distinctio pariatur non incidunt aspernatur. Praesentium totam rem accusamus deserunt dolores. Labore sequi est nesciunt officiis. Placeat deleniti dicta iure quidem quod voluptatibus. Cumque quaerat minima saepe dolorum quo incidunt ullam architecto. Delectus saepe deserunt aspernatur adipisci ipsa. Molestiae molestiae vero ab quas commodi. Similique ad optio vero nobis ullam optio delectus amet. Id sed distinctio. Ipsam magni quos occaecati. Corrupti libero nihil sunt nostrum. Iure fuga doloribus doloribus delectus. Eius illo labore tempore provident aspernatur error error corrupti odio. Tempore corrupti placeat delectus sed nihil natus nesciunt esse ad. Impedit et voluptates in voluptatem sit. Magni nesciunt quo ad id nobis rem odit. Debitis quae nisi ratione. Atque totam quo earum molestiae libero blanditiis minus minima.

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