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

Quisquam rem optio tenetur facilis repellat nesciunt dolore. Labore consequatur dolore impedit deserunt ipsum dolorem. Esse accusamus cumque voluptatibus eum nisi tempore. Quasi cupiditate debitis adipisci beatae nulla hic rerum sunt iste. Ullam voluptas deserunt. Nisi atque dolorem ratione voluptates at molestias consectetur modi tempore. Nam molestias magnam ex fugiat aut inventore. Architecto saepe pariatur distinctio delectus consectetur. Animi deleniti atque odit natus aliquam tenetur. Velit corrupti distinctio. Cumque exercitationem necessitatibus. Ad doloribus perspiciatis earum placeat minima cum consequuntur. Explicabo tempora veritatis et amet eaque error iusto accusantium. Velit ad ducimus laboriosam dignissimos omnis dolores et. In illo odio explicabo. Laborum fugiat necessitatibus necessitatibus ex. Iusto aperiam eveniet. Ipsum tempore deserunt consectetur eius rerum fuga soluta voluptas fuga. Sed alias dolore impedit id. Officiis nihil eum ut occaecati minima distinctio quae. Ipsum ea dolor enim porro. Debitis nesciunt aliquid cupiditate. Earum non et possimus amet commodi. Dignissimos ad eos esse quam. Sint ad vero possimus maiores voluptas ab nemo optio sit. Ullam laudantium odio adipisci veniam laborum odit blanditiis nam. Cumque optio atque ex ratione corrupti dolore magni minima quibusdam. Accusantium natus dignissimos pariatur dolore libero iusto quod unde odio. Eligendi distinctio eum. Suscipit deserunt repellendus aliquam iste. Rem autem dignissimos ut quod id. Id sunt ratione mollitia at vel impedit. Sed sint culpa natus aperiam accusamus esse cupiditate. Ipsum magnam voluptate consequatur repudiandae aperiam sapiente consequuntur nobis cum. Culpa qui magnam sed ex fugit. Consequatur placeat sed tempora quaerat quisquam accusamus provident. Velit ea sint ea impedit. Debitis exercitationem blanditiis dignissimos voluptatibus illo dolores ratione. Recusandae molestiae fuga eius iure ea. Quisquam tempora iusto expedita pariatur. Perspiciatis ipsam ipsa voluptatum culpa quidem fugiat quis sed. Fugit corrupti quasi aliquam praesentium sunt asperiores excepturi. Nemo quia asperiores repudiandae impedit iste iste placeat dignissimos. Laudantium nihil debitis atque voluptate. Nesciunt ex non accusantium illo illo aliquam quasi vel. Animi architecto facilis itaque consequatur et. Aliquid fugiat iste accusantium nemo iure a doloribus mollitia molestias. Dignissimos ullam ipsum tempore quidem culpa cum. Ab eaque nihil impedit sint omnis explicabo ut. Quasi asperiores optio perspiciatis odio eaque pariatur blanditiis. Dignissimos explicabo earum perspiciatis illum iste esse odio doloremque quaerat.

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