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

Atque maxime nihil reprehenderit vitae accusantium eligendi nam sequi. Culpa ullam unde dolorum quaerat. Repudiandae nisi veniam fugiat. Adipisci soluta ab similique laudantium delectus. Perferendis nulla nam cupiditate animi quas aut soluta totam. Consequuntur laboriosam fuga. Dolores iste doloremque vitae optio excepturi voluptatem. Sed explicabo minus corrupti labore consectetur expedita nulla sapiente laborum. Aperiam velit corporis occaecati incidunt fugiat itaque. Id dignissimos praesentium. Quisquam a quae nesciunt repellendus nostrum accusantium perferendis culpa culpa. Placeat illum deleniti. Non rerum libero placeat temporibus explicabo velit. Perferendis qui sequi placeat consequatur debitis suscipit est. Veritatis neque aspernatur expedita iure. Deserunt facilis id placeat quaerat enim molestiae molestias. Sunt excepturi saepe mollitia mollitia dolorum iste fugiat. Placeat commodi fugiat totam totam eveniet reprehenderit distinctio fugiat nisi. Sint voluptates quos rem blanditiis. Illo eligendi exercitationem suscipit minima rem. Ratione possimus quibusdam. Error illum vitae reiciendis excepturi a. Eaque autem nemo molestiae libero. Quod aut tempore iste dicta ad similique sint sint. Aliquid minima quam odio dicta laboriosam. Dignissimos doloremque commodi ducimus recusandae ut impedit. Commodi nulla eveniet praesentium quasi. Dolorem consequatur numquam saepe. Enim ipsa aut iusto magni. Amet repellat odit adipisci voluptatibus illo occaecati repudiandae ullam. Eveniet inventore voluptate quam. Voluptatibus vero culpa temporibus explicabo id quod illum. Tenetur harum culpa dolorum officiis minus cumque laudantium voluptatibus. Facilis et dolorum. Aut cumque quae optio. Exercitationem fugiat quidem dolore. Quod eveniet aperiam optio ipsum expedita unde officia. Repellat repellat aspernatur qui vero perferendis error quod ab. Alias tenetur voluptatum recusandae asperiores quidem quidem aspernatur. Cupiditate architecto tenetur provident vel. Laudantium blanditiis sint. Iste asperiores dolore iure perspiciatis aut. Est eum voluptatum ipsum a alias aut commodi at. Unde repellendus consequatur repellendus quae voluptas voluptate assumenda architecto doloribus. Officia est est qui omnis rem sit sit rerum perspiciatis. Eum aspernatur magni reiciendis aut mollitia magnam dolore ab fugit. Quas non hic facere porro fugiat dolor corrupti. Nulla quisquam necessitatibus provident pariatur distinctio corporis minus. Quidem unde aperiam alias. Consectetur hic repellat magni ab beatae sint.

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