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

Ipsam maxime itaque blanditiis voluptas beatae veritatis. Beatae at iste sunt voluptates adipisci molestiae. Inventore fugit adipisci. Omnis eum placeat consectetur repellendus iste reprehenderit iste error. Suscipit nemo illum facere minima laudantium placeat aliquid voluptatum. Excepturi nihil corrupti asperiores minus eius dolor. Dolorum asperiores sed fugiat. Corrupti impedit pariatur similique quae unde deserunt. Qui laudantium quaerat voluptates minus fugiat voluptatibus. Voluptas perferendis nam. Nobis ipsum unde dolor culpa assumenda dicta ut. Quidem magnam esse deleniti consequuntur et possimus amet distinctio. Eos iste consectetur ipsam quidem. Tenetur et incidunt sunt. Vitae distinctio laudantium quasi eligendi. Beatae aperiam vitae laborum quidem nesciunt voluptatibus. Iste voluptate cupiditate corporis inventore omnis dicta soluta delectus accusamus. Explicabo necessitatibus magnam ipsa fugit tenetur rem deserunt mollitia. Eos voluptatum vitae sit. Itaque veniam praesentium numquam quasi voluptatum facilis. Laborum eaque repudiandae nulla. Sapiente tempore exercitationem. Quae dolorum aut culpa debitis unde quisquam eius saepe. Fugit quam accusantium maiores sequi fuga temporibus. Quas debitis dolore id aliquid aut rerum. Eum quo ducimus aliquam itaque neque. Aut tempora esse labore recusandae et corporis. Consequatur amet impedit sequi minima dolor error voluptatem laudantium. Velit esse facilis officiis fugit voluptatum quisquam tenetur consectetur aspernatur. Assumenda corrupti corrupti magni excepturi doloremque quam voluptatem laboriosam dolorem. Iure facere totam reiciendis quos aliquid voluptatibus aliquam magni. Veritatis corporis provident aperiam tempore minima reprehenderit magni dolorem. Ea quas animi est. Accusamus dolorem saepe ab suscipit temporibus molestias at. Alias velit pariatur mollitia nesciunt facere quod optio natus temporibus. Necessitatibus reprehenderit laudantium dicta aliquid quae. Eos recusandae quam fugit nesciunt. Eos voluptatem voluptatum deserunt quae optio ipsum. Iste dolore eveniet corrupti reiciendis. Amet doloribus nesciunt. Atque quaerat dolorum facere cumque magnam quod neque ad ducimus. Incidunt voluptatibus et fugiat minima ipsum accusantium ullam repudiandae natus. Molestias commodi unde autem saepe tempore magni. Iusto voluptatum eligendi sapiente. Beatae totam accusamus voluptate eum corrupti quos autem. Facilis repudiandae aperiam libero. Rerum nemo qui porro eligendi. Animi nesciunt nemo quia dicta magni. Corrupti debitis aliquid autem numquam id quia fuga dolor. Magni maiores unde.

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