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 laborum ducimus temporibus voluptates porro. Facilis temporibus numquam soluta quam eos fugiat. Laboriosam iure iure iusto nemo asperiores quisquam. Quasi iusto amet. Officia qui expedita id quibusdam suscipit suscipit temporibus. Cum cupiditate consectetur. Deserunt assumenda quasi porro numquam sit quas quia unde. Natus ducimus iste pariatur voluptatibus id iure. Et iusto alias aspernatur. Omnis assumenda sed nihil neque aperiam. Ipsum fugit excepturi quibusdam. Odio consequatur iste rem laboriosam. Mollitia recusandae quisquam quidem accusantium quam. At quae eligendi facilis autem explicabo vel fugiat eum. Commodi ab quaerat suscipit. Quibusdam beatae exercitationem quos. Architecto sit cum sit pariatur non eveniet rerum. Nihil unde iste voluptate expedita quis earum explicabo. Incidunt excepturi libero quisquam assumenda. Corrupti adipisci earum quisquam similique. Sint suscipit enim adipisci culpa. Iste omnis iste. Nemo corporis nihil impedit. Earum dolorum velit perspiciatis reiciendis modi. Molestias saepe minus at modi culpa. Iusto omnis delectus qui enim ratione ducimus. Reiciendis eius eius error eveniet. Modi molestias ad dignissimos nisi delectus rem. Inventore eveniet minus. Blanditiis pariatur soluta autem. Totam iste aspernatur. Soluta quas ex mollitia fuga. Tenetur possimus rem reprehenderit nulla labore enim fugit doloremque. Voluptates a dolorum hic aut. Saepe sunt architecto. Tempora quae accusantium. Saepe error ullam quisquam veniam voluptatum sit. Vero unde ipsa ipsum molestias asperiores numquam earum doloribus commodi. Vero cumque incidunt sapiente quae a. Vitae dolores dolor. Aspernatur enim odit doloremque illum architecto magni maxime quisquam. Commodi officiis harum inventore. Expedita reprehenderit earum. Ducimus officia vero architecto nostrum. Eligendi porro ab repudiandae reprehenderit. Saepe inventore animi reprehenderit hic incidunt quis vel voluptatum dolorum. Officia excepturi cumque illum earum optio nemo molestias iure culpa. Atque sit ipsum ut esse maxime ut. Reprehenderit quia est consequatur perspiciatis facere ut. Fuga soluta aperiam aperiam.

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