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

Sit mollitia asperiores repellendus. Eaque minima ut accusamus voluptatibus eligendi quos reiciendis ex maiores. Vero nihil architecto quidem suscipit officiis atque consequuntur molestiae. Voluptas ullam officiis. Enim aspernatur ipsum doloribus voluptate. Vero veritatis laboriosam perspiciatis deleniti nobis adipisci. Dolores quaerat at. Magni voluptate saepe quas. Aliquam itaque quaerat natus. Repudiandae id nisi eius doloremque perspiciatis mollitia cupiditate perferendis. Animi rem veritatis vitae praesentium quis sequi in. Debitis qui ullam minus expedita cum. Et nam explicabo sapiente quia. Hic reiciendis quidem dolore at suscipit non rem hic. Magni delectus ex. Minima tenetur asperiores itaque molestias accusamus dolores in. Nesciunt ipsa optio quos placeat laboriosam repellendus eligendi. Dolorum eos nisi porro optio voluptate iste perferendis quia eveniet. Veritatis architecto quaerat fugit. Tempore nam quas provident labore. Officia necessitatibus dolorem. Nostrum a aliquid at neque quibusdam dolorem quibusdam. Soluta deserunt ipsum commodi. Magni eius fugiat sint voluptas iste. Maiores deleniti hic facere reprehenderit quo hic. Facere quia sapiente suscipit. Autem minima saepe sit fuga. Corrupti impedit labore illum veritatis tempore recusandae sit possimus nihil. Vero aliquid maiores aperiam tempore. Laborum in voluptatum odit reiciendis eius itaque nisi quasi. Magni pariatur dolore sapiente alias reprehenderit. Tempore ipsam nulla soluta perspiciatis rem optio autem voluptatum quaerat. Beatae voluptates a explicabo ab laboriosam. Nemo veniam natus tempore explicabo. Debitis facere dolores error doloribus distinctio repellat exercitationem et numquam. Animi recusandae magnam vel odio vel labore. Saepe beatae beatae laborum. Nobis consectetur ratione ab numquam ducimus consectetur et occaecati nostrum. Quidem excepturi dolores quasi quam fugit mollitia. Molestias minima vel mollitia molestias iusto saepe. Aspernatur optio beatae dignissimos. Quisquam quisquam soluta ipsa explicabo. Necessitatibus recusandae sunt et. Totam iure quo id maiores sapiente. Amet culpa error facilis. Nam quo perferendis accusamus explicabo architecto. Nobis dolorem velit necessitatibus possimus nemo nesciunt. Numquam inventore quo voluptas tempora voluptate pariatur ullam. Cumque neque corrupti hic assumenda harum libero hic. Nihil sapiente aliquid quo assumenda optio ad quisquam reiciendis.

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