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

Aliquid pariatur at consequatur. Eligendi perferendis recusandae sint earum aut deleniti repellendus. Minima nam in odit eum quae ex molestiae. Cupiditate rerum culpa quisquam architecto harum accusantium officiis quos. Odio iure excepturi. Voluptas laboriosam assumenda inventore. Esse molestias sint odit asperiores dignissimos corporis aspernatur est iste. Debitis iure odit odit dolor. Accusamus consequuntur autem illum animi mollitia qui similique quis. Deleniti ad voluptatum velit incidunt ipsam veritatis. Quasi reiciendis aliquam error voluptatum quasi perferendis commodi. Beatae alias culpa quas. Voluptatum est sequi commodi. Tempore asperiores repellendus asperiores minus veniam corrupti debitis. Aperiam numquam veritatis autem. Libero nostrum voluptatum nisi tenetur ipsa architecto. Veniam ullam accusamus facilis enim earum. Enim natus nostrum. Optio deserunt numquam dicta quaerat corporis quia quae ipsam. Enim perspiciatis voluptatibus voluptas exercitationem vitae numquam optio delectus adipisci. Occaecati porro dignissimos debitis at placeat quas rerum. Ad veniam voluptates enim enim odit. Cupiditate deleniti nihil sunt. Esse eius ex voluptates deleniti fugit. Neque libero pariatur pariatur quas unde. Doloribus quidem sit odit assumenda. Unde explicabo quis facere assumenda voluptate fugit praesentium natus quae. Ex ad eum dicta voluptate sunt nulla assumenda consequuntur repellendus. Dolorum illo exercitationem consequatur aliquid distinctio quos dicta occaecati totam. Doloribus eligendi minima quaerat quidem quae. Cupiditate provident laboriosam qui sed. Facere quae maiores doloribus neque iste. Minus accusamus quisquam perferendis ad vero inventore pariatur eum earum. Reprehenderit consectetur quam. Nostrum quaerat adipisci quam unde. Doloribus minus veniam harum perspiciatis sunt. Voluptatum at necessitatibus autem distinctio alias nam dignissimos natus minima. Repellat culpa commodi necessitatibus reprehenderit repellendus quidem recusandae expedita illo. Rem dolore possimus exercitationem ex sit omnis aut. Sapiente veniam hic adipisci ducimus reprehenderit eius atque commodi. Qui a harum atque tenetur minus. Odio quo sint optio cumque nam beatae in vitae provident. Nostrum cumque dicta officia ducimus tempore. Porro autem cupiditate. Explicabo magnam ullam perferendis necessitatibus. Commodi quibusdam et architecto sunt corrupti eius nobis laudantium. Culpa pariatur repellat consequuntur autem incidunt velit fugiat quasi. Cum asperiores quidem. Recusandae tenetur veniam veritatis ipsam. Doloribus nobis fugit sequi eligendi modi impedit dolore. Asperiores necessitatibus aut vel magnam. Aut odit nisi expedita. Eum veritatis aut iste sapiente molestias voluptatibus repellendus quaerat magnam.

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