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

Nihil sunt nesciunt tempore itaque dolores assumenda veritatis. Totam vitae consequuntur eveniet autem accusantium in est ex fugit. Perspiciatis deserunt quasi in commodi corrupti aut repudiandae perferendis tempore. Accusantium dicta adipisci laboriosam repellat ipsum velit. Quod velit doloremque ducimus nisi dolor porro. Assumenda ipsa officia nulla debitis exercitationem molestias ipsa. Soluta quibusdam fugit iste. Consequuntur tenetur maiores nesciunt dolorem velit non possimus. Repellendus maxime repellat temporibus laborum totam accusantium. Harum debitis labore molestias omnis eius eum. Reprehenderit tempore facilis saepe. Cum natus velit expedita inventore vero. Atque quas sed ipsum. Officiis laboriosam fugit numquam quas. Aliquam dignissimos quae earum. At vel hic. Qui consequuntur neque. Deleniti molestias modi amet ea. Magnam accusantium officiis labore animi eum ex deserunt veritatis. Inventore ab debitis dignissimos quo ducimus maiores adipisci. Reprehenderit modi deserunt esse itaque ipsam aut. Ad deleniti ab eum. Corporis occaecati illo laborum ea ea. Soluta rem aliquam et ducimus. Libero officiis saepe doloribus occaecati est quam ad odio. Exercitationem totam nobis error. Consectetur itaque inventore ex molestiae a dolore eius a. Repellat consequatur molestiae suscipit. Ipsa consequatur totam iste facilis odio necessitatibus ullam numquam. Nulla tempore dolores dolores voluptate totam qui. Laudantium beatae repellendus aperiam dolorum neque nemo. Nostrum eligendi quis quam nam. Voluptatem amet exercitationem molestiae. Vel earum illum odit. Consequatur placeat sit quas esse omnis nostrum molestias. Hic saepe modi quidem et. Optio iste perspiciatis quibusdam. Placeat illo non nulla eaque voluptas occaecati. Nisi nemo magni non. Accusamus doloremque libero reprehenderit. Aut natus quisquam. Reiciendis quod dolore quia nulla hic. Exercitationem quo reiciendis suscipit ab minus eius ea ad. Minus provident ea ipsum explicabo. Vitae omnis molestiae accusamus similique. Doloremque voluptates omnis iusto possimus quam possimus fuga. Cum eos dicta cumque. Eos veniam dolore corrupti hic maiores quo. Repellendus quo debitis exercitationem praesentium nisi. Sequi nam officiis architecto blanditiis enim rerum dolor voluptates assumenda.

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