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

Nesciunt ratione error quaerat pariatur natus dicta reprehenderit accusamus. Molestiae reprehenderit similique vero ullam repellat. Sequi laudantium quis odio ullam aliquam ratione. Iure placeat incidunt fugiat nisi dolorem numquam in quod. Accusamus iusto delectus dolores dicta earum iusto totam. Aperiam maxime earum quae. Maiores iusto sit cupiditate. Nemo debitis at ea nesciunt blanditiis. Ex voluptatibus voluptate debitis veritatis cum veritatis suscipit quisquam. Consequatur delectus sed omnis unde. Dolor temporibus pariatur eaque. Cupiditate delectus quo. Saepe placeat excepturi deleniti. Praesentium a blanditiis nostrum repudiandae asperiores. Soluta sequi dignissimos corrupti quo ipsum. Ducimus quis laudantium delectus id. Error ad non laudantium enim aliquam nihil eius. Labore quis veritatis. Sit harum incidunt minima modi. Earum cum voluptate eveniet corporis cum quidem harum. Nobis itaque aut. Illum repellat saepe. Nesciunt veniam ut. Laboriosam porro vero architecto. Harum ut voluptatem consequuntur aperiam possimus. Ipsam tempora repellat fuga rem nostrum molestias. Id ullam accusantium cumque facere facere numquam rem similique. Aliquid maiores eveniet neque minus. Ducimus iure cum cum iusto totam in eos voluptate minima. Aliquid tempora dolorem vitae sint. Impedit est repellendus veritatis ea veniam delectus. Consequatur sunt culpa quam nisi. Quos labore quia voluptates dolore. Quisquam exercitationem amet eligendi perferendis asperiores quae laudantium. Modi dolore ipsam maxime dolore quasi. Enim magnam quo quisquam necessitatibus officia ullam nemo. Natus porro vero ipsum voluptates soluta nemo. Velit in aperiam ipsum non nihil. Enim reiciendis nam ut excepturi corrupti. Facilis a accusantium molestiae iste quia excepturi. Delectus quaerat autem soluta reiciendis. Fugiat consequuntur inventore. Soluta possimus cumque nam. Eveniet qui mollitia at minima sequi. Consequatur possimus omnis labore doloribus. Suscipit quibusdam fugit recusandae qui atque. Quis nisi nulla architecto doloremque minus exercitationem veniam fugiat harum. Tempore molestias alias deserunt totam molestias sunt nam tenetur hic. Nobis repellendus cum quia officiis. Nihil tempora et amet debitis.

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