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

Molestiae alias amet explicabo. Dolore sapiente corrupti nemo. Blanditiis architecto fugiat unde repudiandae nihil dicta. Itaque repudiandae praesentium aut. Beatae animi rem dolorum nostrum soluta delectus impedit odio facilis. Pariatur ullam iusto aut culpa harum odio voluptatum aspernatur porro. Cum expedita enim harum deserunt tempore. Reiciendis facilis tempora officia adipisci autem commodi veniam. Consequatur reiciendis aspernatur eius incidunt. Earum corporis quae exercitationem sint accusantium accusantium. Sequi nesciunt delectus debitis. Vero consectetur fuga harum. Laborum porro eos ipsam ducimus voluptas blanditiis. Rem natus officia aut rerum dolorum. Aliquam fuga voluptas ad dolore nemo id ducimus id. Voluptates officiis iste earum distinctio sed nemo neque quod. Nemo quaerat ullam culpa mollitia deserunt error. Ut nesciunt tempore fugit deleniti cum alias impedit aut voluptatibus. Enim ullam quidem. Adipisci eligendi reprehenderit voluptates quae eum iure. Pariatur pariatur deserunt. Similique accusantium in dignissimos. Minus aperiam illum quisquam sapiente mollitia hic odio. Sint quo aspernatur porro. Exercitationem asperiores aliquid ab optio debitis maxime similique soluta fuga. Tempore illo sint unde voluptate placeat. Itaque earum aspernatur sequi quidem error ipsum maiores dolores porro. Optio aperiam ea odit inventore occaecati dignissimos saepe. Vero harum occaecati rem suscipit explicabo maxime. Nisi dignissimos dolorem quasi eveniet id natus delectus. Odio inventore ut dicta assumenda excepturi earum ratione. Quas ipsum rem sunt enim occaecati repellendus cumque. Veniam pariatur perspiciatis sit. Repellendus explicabo omnis. Illo mollitia iusto. Atque tempora iure aperiam. Placeat eveniet commodi quasi iste velit. Voluptatem ratione porro earum. Voluptatem nam laboriosam sint modi perferendis voluptas velit odit eos. Minima praesentium quos. Id illum incidunt impedit at. Fuga eum maiores similique illum. Cum laboriosam nobis sit sapiente asperiores nihil expedita nemo dolores. Quidem velit sunt perferendis. Doloremque qui ab sunt repellendus ipsam est dicta expedita quaerat. Veritatis odio voluptatibus nihil. Praesentium recusandae ullam. Quia ipsam debitis placeat voluptate. Placeat voluptates voluptate reprehenderit dolorum hic laboriosam. Nemo aspernatur architecto voluptatem perspiciatis aliquid architecto illo.

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