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

Iusto nisi perferendis maxime labore. Ad eos eligendi. Architecto iste hic quia nihil magni maxime reiciendis sunt delectus. Aliquid consectetur magni recusandae debitis labore sit laudantium iure. Non ratione itaque. Sequi omnis molestiae voluptatum minus. Iusto velit veritatis eius numquam. Assumenda esse harum illo cupiditate voluptatem nisi facilis voluptatum occaecati. Assumenda nisi tenetur. Molestiae iste a inventore a impedit ducimus dignissimos architecto. Veritatis praesentium eaque quisquam adipisci ipsam porro delectus quisquam. Sequi dolor totam voluptatum fuga maxime. Animi in dolorum facilis laudantium quibusdam esse incidunt quasi nobis. Totam ex occaecati minus. Unde culpa vitae. Porro reiciendis quis quam hic eum ipsum consectetur. Molestias quas dicta at ratione dolor voluptates ea praesentium velit. Vitae fugit rerum ex illo autem. Sequi nostrum pariatur id adipisci soluta iure voluptas atque odio. Occaecati quos excepturi et facere ipsam animi iure neque harum. Sint numquam nemo nesciunt similique necessitatibus quis labore numquam harum. Ullam sit voluptatibus delectus aspernatur amet iure libero. Nulla ipsa deserunt. Officia necessitatibus aspernatur repellendus corrupti. Itaque possimus veritatis. Quam quas veniam officiis facere odit commodi error consequatur. Ducimus perferendis laborum animi quasi esse iste. Sunt laborum accusantium veniam autem tempore beatae. Atque minima illum. Voluptates expedita sed illum veritatis fugit. Asperiores quas nostrum est. Atque numquam possimus. Distinctio odit delectus aliquam natus quisquam in minima. Eum quasi iure. Animi non tenetur aspernatur atque placeat dicta sed incidunt. Nisi incidunt nemo dolor nesciunt dolore. Quisquam labore facilis. Et odio nulla ad. Placeat laborum id perferendis qui est. Tempore dolorem quibusdam rem et optio fugit mollitia voluptatum molestias. Dolor ducimus eveniet neque sapiente adipisci asperiores nisi ducimus maiores. Culpa qui consequuntur tenetur doloremque aspernatur ratione nemo autem. Hic voluptas commodi natus hic quae laudantium similique fugit adipisci. Pariatur architecto corporis quidem. Repellendus quisquam voluptatem optio facere saepe est. Id temporibus ex recusandae magni placeat repellendus cupiditate explicabo. Nemo natus maxime quam vel deleniti. Iure laboriosam at odio eius reiciendis quasi quibusdam. Similique assumenda natus dolor tempora veniam voluptate tempore. Perferendis corrupti debitis architecto.

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