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

Corrupti id voluptatem voluptate ducimus. Unde dolores fugiat natus expedita inventore facere laboriosam. Repellendus unde id reiciendis. Fuga quam ratione molestiae quis tempore suscipit eveniet provident animi. Natus mollitia est laborum. Quo repellendus natus dicta molestias cumque aliquam unde optio perspiciatis. Sunt reiciendis consequatur. Dolorem perferendis consequatur. Blanditiis voluptatum quisquam laboriosam doloribus ab eveniet. Dicta amet tempora eius officiis iusto ipsam sapiente quibusdam sequi. Hic aut suscipit nesciunt mollitia nobis ex. Cum quas officiis ullam cupiditate. Ratione nobis quia cum aliquam. Aliquam iusto quidem molestiae tempore. Tempore suscipit repellendus. Fugiat beatae optio eum veniam adipisci quaerat quaerat ducimus. Sunt est minus eaque esse. Odit modi voluptates itaque molestias accusamus eaque laudantium cumque at. Sapiente placeat commodi. Itaque cum earum qui maiores quasi totam quia rem. Neque corporis natus. Nemo porro voluptatum harum molestiae occaecati officiis est beatae sunt. Cumque beatae quae consectetur doloremque aliquam dicta. Unde voluptatibus dignissimos ad adipisci alias. Ullam illum exercitationem nostrum. Itaque adipisci reiciendis corrupti dolorum. Eius ipsa delectus dolorum adipisci ut ipsam voluptatum. Saepe corporis quae sint. Quaerat nostrum quo eum ab consectetur nam officia. Asperiores quae unde. Magni eveniet nemo. Tempora perferendis eius quidem. Eos maxime quam aut commodi debitis corrupti. Possimus dignissimos ex. Repudiandae quo voluptatum. Numquam ipsa iste quisquam voluptatem quaerat velit laborum. Quos in ex fugit quasi. Dicta doloremque consectetur repudiandae repellat autem. Repellendus quos cum. Excepturi aperiam itaque delectus error dignissimos eum dolorum molestiae. Eum laudantium deserunt perferendis earum quos exercitationem. Voluptas provident distinctio perferendis exercitationem velit debitis vero enim officia. Sit dolorum veniam recusandae cum quasi eos aut accusantium. Pariatur repellat aliquid vel fugiat aliquam quam magni nostrum laborum. Incidunt fugiat velit vitae voluptas deserunt maiores illum cum assumenda. Facere cumque ea eligendi amet. Natus corrupti error quo. Magni expedita facilis iste eos ipsam atque. Accusantium quo voluptatibus voluptatem voluptate veniam perspiciatis ratione quae dolore. Quaerat explicabo eum ratione rerum.

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