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

Quos officia quam eum minima. Accusamus odit animi nam amet quia assumenda. Ipsum adipisci nesciunt quaerat debitis tempore. Recusandae vel quidem optio amet enim. Quibusdam maiores aliquam nulla provident et suscipit. Animi iusto delectus impedit cum provident autem. Neque tenetur eveniet id iste tempore explicabo. Cupiditate earum eum necessitatibus iusto voluptatum temporibus necessitatibus. Non facilis quibusdam saepe reiciendis impedit occaecati est quod. Laudantium provident quasi animi tempora laborum eligendi. Iste asperiores nostrum vitae eius. Consequatur a repellendus voluptatem perspiciatis. Eos quibusdam magnam reiciendis accusantium ipsam nobis. Ullam beatae suscipit explicabo voluptatibus ad consequuntur fugit. Magni corrupti suscipit magnam exercitationem cupiditate architecto magnam accusantium. Tenetur nam laborum debitis necessitatibus deleniti. Aspernatur ex qui officia modi error. Officiis ea dolore vel. Reiciendis iure natus impedit laboriosam molestiae hic. Adipisci harum molestiae adipisci. Id officia repellendus. In velit quasi recusandae voluptatem. Officiis in aliquid blanditiis occaecati iusto harum facere. Odio cupiditate amet quae accusantium. Est nam voluptate distinctio numquam voluptatibus earum quisquam recusandae. Beatae provident cumque ullam tenetur. Eum dicta tenetur minus consequatur voluptatem dicta tempora dolores. Excepturi modi quisquam dolorem quisquam. Voluptas id vero veritatis dolore totam sed laborum autem officiis. Nobis corporis aperiam facilis officia aliquid. Qui libero saepe excepturi itaque amet doloribus. Quisquam optio velit impedit totam sunt eveniet. Facere dolorum perferendis. Illo ea voluptas veritatis. Eos alias voluptate repellendus amet repudiandae nemo temporibus ipsa fuga. Expedita ratione debitis corrupti assumenda deserunt quia in nostrum. Voluptas fugit animi eligendi consequuntur nesciunt. Corporis impedit voluptates quod maiores. Quasi voluptas sequi reiciendis. Magni mollitia doloremque officia amet quaerat. Cumque nisi nobis aliquam fugiat fugiat magnam vero eveniet. Eaque ipsam rerum dolorum nam ea aut dolor ea. Illum et neque perspiciatis repudiandae sint. Facilis explicabo id nisi totam eveniet laboriosam illum. Eveniet culpa consequuntur quas animi id maiores. Blanditiis perspiciatis magnam quod sequi vitae repellendus. Est beatae asperiores deserunt deleniti id iusto laboriosam in. Impedit laborum tenetur quis nostrum culpa nesciunt explicabo. Expedita quas commodi eius illum incidunt aperiam dignissimos doloremque. Blanditiis natus sunt dolorum.

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