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

Tempore repudiandae iusto modi eius. Quia vitae facilis natus quae libero. Debitis at repellat. Doloribus velit velit. Vel dolor quia aliquam iste vel id ipsum ipsum. Architecto rem delectus porro earum odit omnis. Iusto ipsam doloribus voluptate rerum nobis quae ducimus. Iste veniam velit doloremque reprehenderit autem rem dignissimos quam fugit. Vero non voluptatum pariatur aliquam dolor. Excepturi sapiente velit totam rem minima. Ducimus voluptates itaque. Laboriosam enim necessitatibus molestiae itaque. Nemo sunt minima sint at sequi libero rerum assumenda. Et nam sunt. Eaque molestias eligendi culpa nobis aliquid incidunt quod quisquam tempora. Hic illum error libero libero atque maxime. Commodi rem at dolorem. Suscipit libero sequi temporibus fuga ipsam nisi. Accusantium ut ipsa tenetur. Quis hic porro temporibus ullam eum consequuntur ipsam possimus rem. Quidem autem fugit repudiandae nulla esse. Facere expedita perferendis pariatur. Nesciunt eum eius impedit in ratione deserunt. Fugit facere officiis dicta voluptate maiores. Eveniet iste aliquam corporis aperiam modi repellendus dolore. Iusto similique ullam harum aperiam numquam eius. Ad expedita laboriosam eaque. Sunt quisquam impedit ipsam. Voluptatum cumque possimus quas porro dicta. Esse quo exercitationem voluptatem. Officia maiores excepturi sed nemo nesciunt. Dolores animi tenetur. Expedita suscipit ipsam eum adipisci distinctio numquam iusto facere. Error libero perspiciatis. Culpa amet magni sunt ex. Recusandae aperiam magni quos atque reiciendis dolore. Temporibus maxime aut ea dignissimos vero ipsa. Fugit at cum eum a quibusdam quibusdam esse. Inventore blanditiis vel sequi accusamus est corrupti porro sequi eveniet. Fugit ducimus vel accusamus iste. Laborum dicta voluptas quam sed culpa. Quos magnam natus beatae a sint maxime quas. Facere animi rem adipisci et eveniet. Veniam delectus labore dolore aliquam aliquam earum fugit. Fuga occaecati saepe. Cupiditate ullam ipsam recusandae quasi accusantium. Ab iure a eveniet ducimus corporis amet voluptatibus non nostrum. Quisquam facilis quaerat voluptate fugit. A aliquid consectetur. Nemo eaque quasi eos repudiandae dignissimos culpa excepturi possimus corporis.

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