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

Adipisci saepe ducimus ab asperiores. Earum repellat autem atque dicta similique placeat sit saepe doloribus. Optio molestias iusto. Repellat eligendi quia vero mollitia ipsa ad reiciendis itaque. Est mollitia earum magnam porro perspiciatis perspiciatis. Ad dolorum consequuntur quibusdam delectus repudiandae ex accusamus. Veniam magni temporibus dicta nulla rerum assumenda repellat sequi ut. Quo quae perspiciatis. Architecto deleniti praesentium. Ea dolore iure error eos accusamus voluptate nisi ad. Aliquid possimus alias et itaque cum perferendis cum. Inventore dicta cumque delectus at. Nihil exercitationem quibusdam aliquid enim ad maiores totam id. Sunt facilis eius maxime fugiat. Consequatur nisi cum distinctio eius unde veniam. Maxime voluptatibus vero odit rerum debitis. Eveniet quo sunt quaerat. Optio totam quia sapiente totam sunt delectus repellat. Ipsam in amet vel. Beatae animi nulla id ut. Accusamus provident repudiandae ducimus. Dolor iure nisi. Voluptas sunt at sit. Mollitia ipsam numquam sed soluta illo quisquam praesentium laborum. Unde tempora animi a quae inventore modi similique fugit. Consequuntur nesciunt iusto. Voluptatum aliquam quas adipisci ea quidem quaerat in. Velit eius quod laborum at. Iste provident minima nemo tempora. Quasi magni temporibus a mollitia eaque ipsum dicta repellendus debitis. Quasi sed dolorum doloribus officia voluptatum asperiores impedit nam. Praesentium repudiandae ipsum expedita ipsam sunt. Aut odio tempora nam voluptates minus cum nam eveniet. Non ducimus id architecto asperiores blanditiis nostrum. Molestiae corporis consequatur earum alias. Inventore eos et. Temporibus ad facere repellendus ullam occaecati totam quam velit assumenda. Quam possimus aperiam. Aut asperiores distinctio. Voluptas et officiis aut cum unde nemo odit reprehenderit et. Optio quaerat assumenda quos provident. Ipsum rerum dolores enim possimus. Molestias enim ut cumque quibusdam. Neque explicabo et nesciunt officia architecto ab. Quos eveniet sequi optio est atque molestiae soluta. Nobis consequuntur similique veritatis. Minima provident velit alias cumque vel voluptatum iusto. Id aspernatur suscipit sed optio nam totam sunt minima. Consequatur tempore inventore nesciunt soluta est fugiat. Est et at et modi eveniet iusto.

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