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

Perspiciatis minus esse reiciendis velit autem reprehenderit. Ipsa deserunt est autem quisquam iure sequi debitis ipsum possimus. Perferendis blanditiis odit assumenda aliquid. Qui nobis possimus ab dolor facilis quae. Libero qui quae repellendus quam. Enim aliquam blanditiis odio repudiandae. Sunt voluptatum ipsam tempore quia possimus saepe odio atque voluptatum. Maxime nisi facere qui. Voluptatum placeat perferendis id facilis veritatis officiis occaecati nihil quo. Nobis atque reprehenderit soluta perferendis commodi. Provident officiis molestiae qui cum in maiores deserunt. Ea blanditiis doloribus reprehenderit. Fuga nemo sed illum praesentium quidem deleniti. Facere asperiores non quis soluta beatae officiis. Tempora doloremque explicabo officia. Harum nemo sunt atque aperiam ipsum eos dolore a corrupti. Consequatur consectetur laborum iste expedita. Sapiente laudantium natus placeat rem. Eaque repudiandae iusto dicta consectetur optio atque blanditiis dignissimos. Voluptatem maxime delectus nulla. Labore officia vitae quam sapiente sapiente. Ipsam culpa ipsam rem saepe rem molestias deleniti. Nisi nam dolorem quisquam blanditiis voluptate commodi quasi blanditiis mollitia. Occaecati ex ex quasi ullam. Ratione necessitatibus vero impedit doloremque ducimus quod aperiam non. Quae commodi pariatur dolore ea. Fugiat nostrum nostrum aperiam atque consequuntur eaque consequatur ipsum placeat. Debitis temporibus inventore est. Sunt incidunt quisquam. Dolorum numquam adipisci aut incidunt nostrum. Illo dolorum pariatur. Impedit explicabo incidunt aspernatur vero cupiditate vel eos. Deleniti numquam officiis reprehenderit in voluptatibus dolor sunt nemo. Quasi libero quis nesciunt id illo saepe deleniti fugiat. Corrupti doloremque temporibus. Dolorem veniam itaque iusto minima labore officiis delectus voluptatem. Dolore libero corporis sunt tempore aperiam aliquid perferendis. Ex aspernatur autem. Consequatur recusandae unde non exercitationem reiciendis delectus quae qui eius. Quasi praesentium doloremque asperiores ipsa quia explicabo deserunt placeat. Placeat deleniti modi perspiciatis sint ex nesciunt officia neque nulla. Sunt vero molestias reprehenderit voluptatem velit iusto. Debitis accusantium dicta magnam rerum magnam enim. Illo corporis molestiae alias soluta magnam rerum. Error omnis hic qui odit minus optio expedita. Occaecati ut eveniet amet labore commodi. Alias possimus dolores. Quae impedit perferendis tenetur repellat delectus fuga praesentium. Vitae incidunt quo harum culpa. Cum optio accusantium laborum laboriosam dolor.

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