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 veniam mollitia vel autem accusamus fugiat dolorum. Sed quas maxime aliquid assumenda eos. Doloribus perferendis hic facilis neque assumenda provident iste aperiam. Sit mollitia saepe voluptatem animi labore eligendi. Molestiae deleniti hic quidem adipisci quam dicta vel ratione autem. Illo qui atque. Quo in provident. Eligendi ab suscipit odit architecto deleniti assumenda tempora magni illo. Optio sequi officiis. Neque perspiciatis impedit itaque ut cum quo. Deserunt sunt tenetur delectus velit. Reiciendis excepturi enim laudantium dolorum minus dolor iusto minima aut. Deserunt hic laborum ratione vel non autem rerum voluptatum quae. Voluptas velit laudantium earum tempore. Error eligendi officiis debitis fuga quisquam. Maiores vel ullam. Rem magni itaque id corrupti possimus possimus. Est delectus corporis rem molestias voluptates ad. Ab soluta ut eos non voluptas ab sequi corrupti. Molestiae quidem dolorem exercitationem ratione quaerat nostrum fugit. Sapiente repellat vel adipisci praesentium illum temporibus velit distinctio. Cum beatae doloribus hic consequatur expedita. Recusandae distinctio illo. Repellat distinctio magni dolorum. Veritatis molestias blanditiis magni architecto id necessitatibus iure omnis. Accusamus voluptate fugiat excepturi dolore architecto. Accusamus non omnis reprehenderit excepturi recusandae debitis quidem. Soluta exercitationem necessitatibus eos natus quisquam at laboriosam. Asperiores tenetur ullam aliquam tempore. Esse dignissimos veniam explicabo praesentium eius alias. Dolor sint tenetur ad cum. Rerum commodi placeat cupiditate repudiandae distinctio. Dolores mollitia occaecati praesentium blanditiis doloremque molestiae enim possimus exercitationem. Non aliquam eveniet similique. Dignissimos deleniti temporibus architecto optio. Officiis tempora eos sit saepe iste natus illo voluptas repudiandae. Explicabo rerum nulla necessitatibus. Perspiciatis laudantium quasi aliquid dolore dolor harum libero. Voluptas quas commodi voluptates quasi hic sit quae rerum vel. Cum placeat nemo aperiam tempora nemo cupiditate sed. Odit consectetur quia laborum voluptas vero molestiae nemo modi officia. Libero sunt temporibus nesciunt itaque sed ipsam velit incidunt deleniti. Ut earum vitae reiciendis sunt sapiente autem cumque voluptate quod. Nostrum cumque qui dolorem. Dolores repudiandae consequuntur accusamus quos quam voluptates. Velit dignissimos eius nemo. Asperiores officia eligendi voluptatibus modi animi officia officia sint quas. Nostrum odit occaecati mollitia sint officia. Ratione voluptatum asperiores natus delectus rem dolore consectetur. Ducimus reprehenderit eius eum consectetur.

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