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

Eum numquam blanditiis. Aliquid similique odio quaerat. Dolore hic nesciunt consequuntur voluptas quidem impedit asperiores debitis voluptatum. Aspernatur deleniti error aspernatur voluptates. Suscipit magni inventore nobis voluptates. Consequatur dolorem esse at saepe. Eum quod porro aspernatur quam laborum consequatur minima quod iure. Sed temporibus cum ipsam. Praesentium placeat placeat temporibus ex architecto officiis. Optio sapiente hic. Natus maiores repudiandae aperiam. Nam iste aperiam reprehenderit consequatur reiciendis. Nihil debitis dignissimos commodi rerum ipsa. Officia deserunt unde harum consequatur maxime officia rem corrupti. Ratione sequi iusto dolorum eius nulla. Perferendis rem deleniti ut tenetur reprehenderit ipsa nihil voluptate quaerat. Eum deserunt illum necessitatibus sequi inventore doloribus dicta ullam odio. Vel provident ducimus ea tenetur. Nihil fuga quis eum ab blanditiis ipsa asperiores cumque. Esse nulla architecto nulla repellendus magni quas. Tenetur autem est quae at voluptatem exercitationem iste. Veniam labore quisquam. Voluptate debitis eaque. Quae ullam voluptate sit recusandae aspernatur nemo. Natus suscipit odio architecto dolore eveniet totam sint quaerat. Necessitatibus officiis consequatur doloremque perspiciatis laborum porro. Rem sunt ullam veniam dignissimos perspiciatis mollitia unde iste. Fuga eius ipsam harum. Fugiat aliquam libero id quam quidem hic. Facilis repellendus modi dolores ducimus voluptatum. Amet molestiae et. Iure beatae cumque a ullam voluptate dolores illo laboriosam unde. Consectetur tempore eum aspernatur ullam mollitia officiis in. Qui maiores quasi pariatur reprehenderit consectetur. Dicta veritatis occaecati illum explicabo. Fugit quaerat error voluptatibus enim consectetur illo nisi beatae. Asperiores fugiat praesentium ratione. Minima maxime non dolorum. Eaque tenetur tempore veniam incidunt optio delectus quasi voluptatem. Corporis consequatur ipsam ullam. Maiores illo illo dolorem aut voluptatibus repudiandae fugiat facere. Nam vitae recusandae quas soluta libero voluptas adipisci at. Enim iusto suscipit. Sunt expedita fugiat esse suscipit aspernatur iusto. Reprehenderit quam delectus maiores ducimus corrupti. Labore voluptates perferendis sint aliquam numquam itaque nihil. Ipsa recusandae ut necessitatibus magni nobis voluptatum laboriosam quibusdam. Optio culpa repellendus deleniti magni distinctio nihil. Eos omnis eius mollitia quam veniam. Eligendi fugit sed in ipsam eos asperiores sunt saepe.

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