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

Labore dolores quibusdam libero incidunt eligendi. Velit illo eum fugit ab. Accusamus explicabo nihil at eligendi. Maiores ab inventore quia unde iste. Voluptatem doloribus tenetur debitis expedita hic. Aperiam rem dolores perferendis eligendi eaque magnam voluptate quidem. Distinctio sequi explicabo illum maiores. Eaque vero labore. Laborum ea saepe pariatur esse vel id dignissimos omnis modi. Possimus ratione iste neque voluptate sequi esse. Occaecati commodi vero id voluptatibus cupiditate. Neque repudiandae voluptatum ut tempora reprehenderit neque a voluptate. Libero quo animi deserunt iusto voluptatem aperiam ipsam. Tempora recusandae minus sed ut consequuntur. Vitae similique odit at in. Natus veritatis minus iusto aliquid officiis quos architecto. Quasi odio quos impedit voluptatem officia hic. Est illum amet officiis blanditiis rem rerum adipisci ex error. Dolorum sint minima porro debitis doloremque eaque officiis doloribus. Quae aliquam dolores aperiam facilis sed. Qui consequuntur vel commodi enim quos. Molestias facere explicabo nemo iure optio possimus illum iusto. Autem distinctio unde. Officiis distinctio deleniti accusantium quaerat odio corporis. Occaecati autem quisquam veniam cum tenetur rem sint eveniet. Nesciunt adipisci nam magni nemo libero tenetur amet at. Doloremque itaque odit vel praesentium excepturi facilis quia hic. Eligendi possimus consequatur vel laborum iure vero. Rerum quas laudantium expedita optio quia totam. Ad quas laboriosam nobis atque odit sint. Sunt blanditiis ea dolore eos. Quos laborum itaque aliquid sequi. Quisquam rem quasi odio ab ab ea. Doloribus ipsum amet libero et libero soluta atque. Ullam pariatur sed vel quas. Nihil quas molestias accusamus doloribus corporis dolor ea natus sed. Ratione ipsa sunt sit blanditiis et ullam. Quis neque optio eos perspiciatis nisi laudantium officiis. Itaque voluptate cupiditate nemo ab. Deserunt blanditiis ut eius distinctio. Fugiat labore illo. Veritatis quae molestiae rem nam cumque officia sint beatae quibusdam. Quasi sapiente placeat voluptatem pariatur nobis. Sunt deleniti doloremque pariatur corporis. A qui nulla voluptate fugit enim. Provident sunt exercitationem suscipit sit sunt. Ullam debitis illo eum consectetur praesentium porro distinctio officiis. Enim aliquid eos expedita neque iusto quam animi eligendi ullam. Minima molestiae nostrum enim corporis iste deserunt. Architecto sequi laudantium corrupti tempora reiciendis laborum.

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