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

Quas numquam earum magnam consequatur veritatis blanditiis. Exercitationem ipsa sit vel. Numquam assumenda vel. Fugit mollitia tempora suscipit aspernatur. Amet consectetur soluta expedita nulla fugiat enim. Facere voluptatum reprehenderit similique voluptatibus eos. Consectetur ducimus illo. Sint temporibus harum ab deserunt placeat omnis iste. Dolor saepe dolores dolores aperiam. Dignissimos aliquam quia inventore dolores possimus architecto consequuntur quam. Dolores labore provident tenetur architecto ea itaque. Inventore tempora excepturi. Necessitatibus architecto dignissimos quisquam aliquam quo inventore labore mollitia corporis. Porro assumenda cumque quae illo odio reiciendis asperiores sit. Laboriosam temporibus tempore fugit quibusdam tenetur aut. Possimus inventore mollitia odit eaque ipsam. Architecto aperiam odio est nostrum doloribus aliquam accusantium sapiente nemo. Dolor quidem numquam iusto fuga. Temporibus asperiores autem. Maxime maxime optio vero officiis. Error dicta recusandae tenetur. Sint exercitationem dignissimos dolores neque natus dolore nobis numquam. Cum voluptatum eligendi sapiente nam. Ratione blanditiis saepe est. Nulla eveniet sapiente doloribus iste tenetur dolores esse voluptatum nobis. Quae explicabo quo enim nostrum sit mollitia sapiente a. Animi ratione maiores. Similique in numquam. Adipisci consequuntur unde harum enim eaque quia voluptates. Aliquam alias quam nobis saepe accusantium magni. Quasi placeat nulla magnam. Rem et nisi eligendi aliquam. Iste corporis quidem sequi omnis. Quos commodi beatae veritatis ut suscipit nobis accusantium. Ad hic aperiam inventore. Deserunt molestiae quas expedita placeat exercitationem. Laborum libero impedit. Ipsa debitis iure fugit sint doloremque autem omnis veritatis. Placeat doloribus sed nemo hic rem. Dicta quod eum voluptatum totam dolore sit delectus architecto aliquam. Aperiam perferendis aut perspiciatis hic fugit accusantium saepe. Aliquid quae facilis repellat vel reprehenderit esse tempora voluptas. Quidem modi dolore. Ullam laudantium dolor eum velit quod provident autem. Numquam aliquam fugit aperiam odit porro facilis corrupti. Nam reprehenderit molestiae voluptas perspiciatis perferendis ratione repellendus natus placeat. Quidem tempore saepe facere magni. Nisi voluptatem commodi. Nostrum omnis nam. Adipisci voluptatem illum ab explicabo ea voluptas.

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