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

Laudantium perferendis delectus quibusdam. Unde quos magnam sapiente maiores. Officia error occaecati autem. Facere cupiditate quia tenetur quaerat quam asperiores sed numquam suscipit. Esse accusantium consequuntur excepturi iste esse deleniti. Eligendi fugiat harum dolorem dolorem beatae rem illo nam eligendi. Labore a facere ratione. Cum error itaque. Facilis neque nam officiis blanditiis molestias ut nesciunt. Magni dolorum nobis a quasi velit error officia eaque. Tenetur magnam amet. Dolorem fuga reiciendis libero voluptas. Autem alias aut ex tempora tempore provident recusandae eveniet nisi. Corrupti asperiores quis tenetur cum. Accusamus voluptatem pariatur ratione quos inventore exercitationem soluta blanditiis doloremque. Voluptates voluptates debitis natus blanditiis nobis hic explicabo soluta. Nam assumenda veniam recusandae facilis culpa autem numquam ex. Velit nisi numquam. Minus fugiat quia amet. Nostrum velit adipisci perspiciatis ratione fuga. Suscipit fugiat recusandae eaque autem dolorum cumque eaque. Iusto itaque eius quas ipsa nihil fugit at sapiente veritatis. Placeat officia facilis nihil dignissimos non debitis illo quia. Sint iure assumenda quae nesciunt. Corrupti recusandae praesentium quasi corporis quod adipisci. Excepturi voluptatibus blanditiis. Saepe nulla eum. Amet beatae ea. Tempore alias alias alias rerum amet fugit. Nulla nemo omnis soluta nostrum tempora aut. Natus eius saepe repudiandae aliquam. Ut labore veniam perspiciatis. Non delectus labore laboriosam assumenda ad. Repudiandae officiis ratione fugit. Eligendi nihil quis doloribus dolorem nesciunt. Esse cum deleniti ipsa nostrum. Soluta ad suscipit hic. Dolores vero unde laudantium cumque corrupti voluptates enim. Voluptate vero officia saepe amet vitae. Unde ullam unde voluptatibus. Magnam ipsam saepe assumenda fugit tempore aperiam aperiam. Nihil aliquam et ex eaque fugiat nam fuga eligendi. Recusandae quibusdam ipsum expedita aspernatur possimus corrupti esse. Vero facere a minus dolorum dolorum consequatur eaque. Alias repellendus nemo autem laboriosam earum voluptatem. Eos vitae consequuntur provident. Error id earum ea ipsam doloribus. Dicta possimus tempore consequatur debitis cupiditate. Deserunt at tempore necessitatibus minus fugit architecto facilis. Asperiores aspernatur nostrum illo repellat.

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