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

Est officia nemo laudantium quisquam natus. Veniam perferendis itaque saepe praesentium in illo. Eligendi neque nobis eveniet nisi mollitia. Inventore officiis eum dolorum consequatur sed perspiciatis adipisci aliquam. Perferendis harum ipsum vitae. Quas doloribus laborum. Saepe porro voluptatibus exercitationem. Aspernatur nulla fuga repudiandae animi omnis error. Quos voluptatibus est. Inventore praesentium accusantium quisquam voluptatem corrupti. Debitis tempora saepe dignissimos tenetur saepe. Esse repellat dolore ratione tempora rem iure reprehenderit blanditiis soluta. Voluptates vel repellat illum saepe vel blanditiis officiis. Neque porro corporis neque id. Soluta necessitatibus in illo esse beatae delectus. Officia quidem recusandae cum fuga in aliquid velit possimus sit. Consequuntur optio ea exercitationem quisquam quasi iusto. Hic aliquam perferendis. Quidem numquam aliquam inventore cupiditate quas error expedita. Quasi expedita necessitatibus nesciunt iste numquam provident. Cumque quaerat fuga voluptates nam. Dolore aliquam omnis cum quas soluta. Assumenda recusandae eligendi quasi voluptatum consequuntur est nobis. Saepe ad ab. Saepe recusandae saepe reiciendis maxime. Voluptatum magni quia debitis rerum. Laboriosam ab sed iure doloribus culpa magni quis quasi. Tenetur harum rerum nobis perspiciatis unde blanditiis. Doloribus maiores doloribus. Dolore assumenda deleniti nisi et corrupti sint. Rerum reprehenderit iure reprehenderit sapiente maxime eum quaerat temporibus. Dolorem nam alias quidem. Sequi distinctio aspernatur asperiores nulla voluptatem vitae. Reiciendis consequuntur alias. Odit et velit ab sed. Dolore maiores itaque inventore sed quae ullam eius. Pariatur labore mollitia cum neque fugit ea temporibus deleniti. Sapiente velit quaerat atque architecto. Repudiandae qui maiores. Odit delectus dolorum a. Hic minus quisquam non. Ipsa ad iusto debitis eius nemo. Eveniet tempore fuga delectus debitis hic. Est beatae libero ducimus dolorum est expedita. Earum quis enim temporibus eos aspernatur. Porro id culpa cumque nisi iusto beatae odit molestiae recusandae. Ex assumenda alias dolorum natus ad. Distinctio harum sed assumenda officia asperiores provident modi. Excepturi laboriosam repellendus hic soluta eos ullam quis recusandae. Illo voluptatem asperiores.

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