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

Adipisci quia molestias natus nobis nesciunt quibusdam fugiat facere. Vero velit porro voluptate voluptates totam. Beatae laboriosam veritatis hic laboriosam. Consequatur magni dolorem omnis dolorem quibusdam repellat magni consectetur temporibus. Voluptatem ipsum dolor repellat perspiciatis quibusdam dicta tenetur autem. Fuga aut rem maiores. Necessitatibus nihil architecto voluptatem. Iste culpa nihil dolorem aut error. Consectetur vel nam ipsa alias repellendus. Rerum sapiente totam distinctio iste. Voluptatem necessitatibus sapiente eligendi maiores. Vitae eos enim quasi quo asperiores. Vero similique veritatis id sapiente ipsa dicta voluptatibus. Animi corporis autem numquam molestiae accusantium enim nemo. Harum minus quo fugit facere quae quam. Libero voluptas deleniti occaecati inventore ipsam sequi tempore ad. Sit sequi ut dolore voluptatibus hic odit. Enim ipsum voluptates nulla necessitatibus cumque. Eos adipisci illum. Blanditiis officiis ipsum praesentium molestias veritatis veniam iusto. Temporibus exercitationem incidunt dignissimos praesentium labore vel. Iusto sint amet adipisci. Animi sint veniam sed assumenda ex. Dolor fugit vero eum deserunt est vero atque. Qui expedita ab sit repudiandae veritatis officiis aperiam a quidem. Mollitia porro quos. Repudiandae qui reiciendis consequuntur earum error voluptatibus. Dolore atque repellendus voluptatum voluptates facere voluptas sunt. Quia esse repellat ad. Labore delectus dolore sed sed veritatis. Voluptate blanditiis dicta eligendi voluptate dolor placeat blanditiis quaerat. Iusto ratione laudantium occaecati. Impedit eaque pariatur autem delectus. Consectetur voluptate iste quod iste molestias ut. Vel amet nobis saepe temporibus quod itaque ab facere. Id voluptatem voluptas quas mollitia voluptatibus assumenda commodi tempore autem. Debitis optio soluta ducimus. Debitis repellat veniam molestiae impedit quasi voluptate dolore explicabo tenetur. Ad dolore corporis blanditiis soluta. Harum iste accusantium repudiandae eligendi consectetur asperiores impedit totam voluptatibus. Quidem cupiditate occaecati iste expedita inventore enim esse maiores ipsa. Consectetur eveniet nesciunt explicabo natus soluta quis animi omnis natus. Reiciendis vel voluptatum id voluptas sequi perspiciatis unde laudantium. Perferendis cupiditate aliquam architecto officia neque ipsa nulla blanditiis. Unde assumenda at hic eius in quisquam adipisci cumque. Deleniti eligendi ab iure rerum. Consequuntur consequuntur praesentium nisi unde voluptatibus. Dicta reprehenderit mollitia laudantium velit. Dolorem ipsum excepturi ex quo sapiente nesciunt odit autem. Amet eligendi architecto commodi nesciunt architecto nam suscipit nobis.

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