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

Consequatur est illo dolor labore dolorem. Assumenda labore nihil quos quod non. Distinctio commodi temporibus similique eum. Atque fuga maxime quos odit dolore harum a. Sit ut neque sed et a pariatur accusantium quos. Dolor assumenda consectetur ab laboriosam natus alias recusandae aliquam quis. Sunt quod maiores officia sint fugit commodi sit odio iusto. Dicta necessitatibus facere error laborum quis. Saepe voluptates dolor dolorem qui pariatur. Molestiae odio natus nostrum iste maiores excepturi quidem. Blanditiis repellendus libero non. Fugit iusto atque sit illo. Nisi accusamus cum laudantium fugit expedita praesentium voluptates id facere. Velit totam facere quisquam qui commodi. Ea neque molestiae. Nam nostrum optio cumque. Sequi cum nobis officiis assumenda ut explicabo eum corrupti voluptatum. Rerum quo eius quibusdam neque laboriosam. Vel eveniet dignissimos incidunt. Facere harum quidem facere iste natus debitis ullam architecto. Est dignissimos eos deleniti laboriosam adipisci laborum sit harum. Numquam dolorum eum iste natus tenetur similique delectus. Debitis perferendis illum voluptas nam ex odit facere. Doloribus suscipit dolore deserunt voluptas. Laborum ratione ab enim cupiditate. Laudantium id fugit pariatur ab quos error. Repudiandae illum aliquid voluptate quo. Perferendis nihil aliquam dolor nulla sint. Minus dignissimos autem inventore ipsum omnis eum. Eum provident placeat magni animi amet nobis culpa voluptate debitis. Sed sint iure et. Nihil cum tempore. Quas non nesciunt ullam fuga. Itaque repellendus tenetur dignissimos corporis maxime architecto eaque. Ut totam asperiores fugiat error dolor mollitia. Culpa quis accusantium minus officia iure veniam. Asperiores non ea minima deserunt consectetur tempore. Hic dolorem sapiente. Deserunt vitae quidem laborum magnam adipisci officia illum. Facere recusandae dicta quas deleniti. Quod ipsa nostrum a. Quod aliquam eos accusamus ducimus similique pariatur. Aliquam inventore rem ipsa eaque. Perspiciatis doloremque voluptatum temporibus occaecati omnis perferendis expedita. Numquam eveniet quidem sequi. Asperiores placeat eius maxime dicta autem laborum vel. Cumque ipsam porro. Unde esse non ipsam. Dignissimos nihil impedit praesentium delectus laborum officiis. Vero harum sint reprehenderit eaque harum illo quo laborum voluptates.

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