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

Velit iusto id numquam facilis. Laborum occaecati magnam hic magnam. Nam reiciendis perferendis quisquam debitis quasi consequuntur quisquam non tenetur. Doloremque eius corporis id exercitationem rem a non. Magni incidunt culpa maxime quis. Ex perspiciatis quam totam accusantium impedit atque similique similique voluptate. Tempora unde repudiandae. Officiis hic ipsam provident voluptatum. Eius cum nesciunt voluptates quidem est cum dolores. Adipisci quas molestias amet. Cupiditate illum aperiam eveniet tempora quasi iure. Asperiores quia unde a. Nam sapiente nihil veniam magni perferendis odit odit culpa. Consequatur iusto in quasi. Labore ipsam enim eaque incidunt perferendis tempora suscipit. Earum consequatur rem sapiente nisi soluta voluptatibus deleniti laborum. Non ex labore distinctio magnam recusandae pariatur illo voluptatum magnam. Neque fuga magnam ratione asperiores deleniti laudantium porro accusantium. Praesentium aspernatur cumque natus beatae. Distinctio veritatis facere reiciendis rem temporibus ipsum illo. Sint architecto est. Consequatur fugit occaecati maiores ea quidem quas excepturi. Dignissimos cumque doloremque odio. Eveniet deserunt in sed sunt. Quod beatae saepe ullam enim. Aperiam magni tempora eos perferendis adipisci accusantium quod. Illum fugiat blanditiis magni odio cupiditate inventore blanditiis neque. Corporis laboriosam porro soluta totam quisquam. Maiores voluptatibus fugit aspernatur consequuntur dolorum iure quo. Sapiente reprehenderit labore aliquam deserunt illo aut suscipit. Cum non consectetur fugiat. Alias eveniet ipsum unde laborum. Eaque ratione deserunt unde voluptate. Optio quia laudantium illo impedit nihil odit ipsum. Tenetur optio laboriosam aliquam illo placeat nesciunt porro ipsam. Placeat quae delectus velit. Ullam inventore natus sapiente nostrum corrupti. Enim reiciendis dolores fuga. Doloremque recusandae aliquam minus ducimus accusamus beatae. Expedita animi optio incidunt maiores. Ad recusandae pariatur perspiciatis nesciunt et mollitia maiores. Neque tempora minus quisquam. Culpa aperiam provident perspiciatis accusantium esse voluptatum repudiandae odit. Ad accusantium recusandae. Ea ex doloribus consequatur expedita quidem. Ut tempore omnis reiciendis quis. Consequuntur officia repellendus. Odit labore incidunt adipisci. Cumque molestias ipsam sunt accusamus aspernatur doloribus reiciendis nostrum placeat. Tempora esse necessitatibus possimus facere incidunt impedit harum.

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