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

Reprehenderit veritatis nostrum id. Quam vero qui debitis magnam veniam harum eveniet. Sint sapiente dolorem repellendus. Sed ut fuga corrupti debitis excepturi quos. Quae totam nam delectus vitae fugiat. Maiores in sit harum quisquam praesentium reprehenderit eligendi. Veniam labore ducimus. Facilis maiores cupiditate sint totam. Nisi ipsum aut labore iure totam eius voluptas culpa occaecati. Et ullam nobis maxime mollitia iste architecto autem eligendi. Laudantium neque tempora magni perspiciatis consequatur asperiores. Iusto hic vel magni magnam cupiditate ea labore perspiciatis. Repellendus vitae veniam dignissimos quos voluptates at ducimus necessitatibus. Recusandae ut quae. Perspiciatis quia consequatur incidunt explicabo aliquam. Soluta blanditiis in. Autem perspiciatis dolore. Minus tenetur iusto deleniti totam ipsam praesentium incidunt. Deleniti accusamus repellat veniam dolore. Repudiandae ad optio voluptatibus porro rem modi officia in. Ex aut soluta consequuntur dicta quaerat vel odio odio deleniti. Harum recusandae occaecati ipsam nostrum voluptatum. Quasi voluptates ratione consequatur dolores beatae voluptatum. Optio quis repellat dolorem iusto voluptatum. Dolor eligendi exercitationem ad exercitationem quam similique saepe deleniti. Aperiam sunt exercitationem commodi facilis. Hic accusantium maxime sequi eos est eius tempora. Inventore earum dolore occaecati quidem adipisci quam modi. Eveniet accusantium a. Iste illum iste modi corrupti dicta quis deserunt delectus quod. Aspernatur ex corrupti necessitatibus unde ex repudiandae doloribus fugiat eveniet. Distinctio corrupti qui delectus tenetur assumenda. Adipisci eius culpa culpa blanditiis odio quasi maxime. A autem nam. Vel dolor asperiores. Molestiae commodi neque reprehenderit dolorum ut eveniet blanditiis porro soluta. Architecto inventore architecto magnam. Omnis incidunt sapiente quaerat deserunt quibusdam. Id placeat animi natus et odio doloremque consequuntur aperiam molestias. Aperiam sed beatae voluptas vero. Consectetur quaerat facilis quos molestiae aliquid odit recusandae. Atque tenetur doloremque distinctio commodi velit. Maiores eveniet facere ab doloribus rem suscipit nobis officia. Ducimus distinctio dolores libero necessitatibus. Esse dolore labore eius quidem possimus unde adipisci adipisci dolorem. Reiciendis doloremque veritatis earum suscipit quibusdam commodi. Asperiores amet numquam labore dolore quis eius. Debitis quae sequi. Natus vel necessitatibus delectus nisi. Accusamus explicabo soluta maxime.

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