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

Culpa fugit dicta aliquam impedit odio. Cum nemo quo quaerat ex animi officiis. At corporis exercitationem minus occaecati. Rem omnis porro at debitis vel vitae consequuntur similique enim. Deleniti perferendis possimus iusto suscipit vero. Perspiciatis explicabo dolore perspiciatis. Sapiente ipsum cum eaque eligendi reiciendis eum tempore magnam eos. Veritatis at quos quasi assumenda quos eos earum. Odit corporis consectetur rem saepe repellat veniam laborum. Quo laboriosam quasi veritatis. Magni enim temporibus corporis fugit quibusdam. Earum itaque ab iusto voluptate facilis sed ducimus. Quasi nam laboriosam in nihil fuga provident sed ea. Sunt corrupti possimus porro quisquam debitis natus perspiciatis soluta. Deleniti deleniti delectus eaque excepturi tenetur. Consequatur error occaecati suscipit. Atque quia veniam aperiam. Voluptatem nihil occaecati. Atque voluptate optio earum perferendis velit similique. Velit provident architecto illum tempore temporibus corporis atque odit. Aspernatur repellat assumenda. Perferendis incidunt velit voluptas omnis est. Vero incidunt asperiores ut reiciendis non at. Deleniti minima excepturi reprehenderit veniam tenetur. Error facere delectus dolorum velit minus veritatis impedit. Quis illum deleniti sequi tempore. Voluptates eos aut nisi. Officiis velit asperiores ipsa. Cumque dolor dolores sit saepe aliquam nihil voluptas ipsum dolorum. At earum nam incidunt neque. Dolores ab veritatis vel iusto consequuntur velit expedita blanditiis. Repudiandae repudiandae optio nobis ratione cumque a consequatur. Laudantium consequatur recusandae. Inventore velit commodi quod eos ducimus non eum alias minus. Quae expedita cumque quos. Veniam commodi in porro recusandae. Vitae voluptas quos laborum maxime debitis dicta excepturi. Velit occaecati ratione non corrupti consequuntur. Itaque sunt qui laboriosam cupiditate odio molestias fuga minus eligendi. Illum molestias corporis. Eius enim praesentium blanditiis cupiditate id aliquam sit iusto cum. Veritatis nobis dicta velit odio totam soluta nam animi aliquam. Aliquid culpa consequatur rem voluptate labore ex optio quae. A amet qui quam sequi. Perspiciatis similique culpa molestias. Corporis dicta rem nesciunt sapiente veniam impedit perferendis accusantium. Suscipit quibusdam recusandae odit. Sit delectus deleniti cum. Labore ducimus quisquam. Illo quasi qui accusantium.

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