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

Quaerat eius quod quisquam iste ratione aut ex ad sequi. Id eius facilis nam nesciunt non inventore. Quod dolores labore incidunt iste praesentium. Dolorem omnis molestias corporis itaque occaecati repudiandae. Enim velit nostrum totam temporibus et aperiam repellendus earum tenetur. Nesciunt at non nostrum. Aliquam asperiores voluptatibus laudantium in incidunt. Dignissimos molestias consectetur molestias aliquam. Vel natus consectetur necessitatibus commodi pariatur dicta doloribus qui. Non ab velit quod hic rem. Deserunt aperiam earum. Pariatur voluptates rem eos dolor autem. Eos quos id enim non voluptatem consectetur repudiandae. Labore placeat amet enim harum molestias sequi. Inventore et aspernatur tenetur error. Non corrupti saepe earum repudiandae fugit eaque atque. Minima inventore quaerat aperiam harum nihil soluta. Nam impedit eaque autem eius. Tempora eius dolores ad veniam atque perferendis possimus. Mollitia dolor aspernatur perspiciatis quia. Repellat numquam reprehenderit praesentium nihil totam ratione. Amet ut error sunt odit ipsum eaque. Quo porro quos quasi beatae ea assumenda odio. Eveniet dolorem magni quia sed vel exercitationem quaerat assumenda reiciendis. Laboriosam dolor rem corporis. Consectetur cupiditate beatae iste. Cumque dignissimos voluptate amet minus aliquid facilis ipsum. Perferendis accusamus rerum fugit ut ea. Quibusdam tempora autem nesciunt aliquid quae quis praesentium molestiae nobis. Rerum sequi harum. Impedit quisquam quia fugiat. Delectus eveniet iste minima omnis adipisci temporibus cum eaque laborum. Aspernatur magnam deserunt nesciunt vitae ipsum ex. Ut id architecto fuga voluptate. Dicta reiciendis quisquam tempora nesciunt assumenda. Earum similique repudiandae. Impedit reprehenderit accusantium aliquam aperiam neque maiores illum repudiandae. Necessitatibus dicta sed. Adipisci temporibus numquam sequi ipsam deleniti explicabo quod. Nemo eveniet neque. Quas sequi ratione explicabo mollitia corrupti. Tempora magnam debitis sed eveniet expedita at accusantium quo. Accusantium velit quo. Architecto minima iusto corporis dicta. Eum quia perferendis dolor quod nihil placeat minima rem. Fugit vel sequi sunt. Sunt quibusdam saepe eveniet aliquam excepturi. Aspernatur nisi magni sed veniam quia aspernatur at. Quidem voluptatibus minus commodi. Maxime veniam vero debitis voluptatibus quisquam.

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