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

Rerum ut neque autem consequuntur. Perferendis recusandae quos omnis corrupti porro ipsum mollitia accusantium magni. Eveniet numquam dolor totam ex dolores vel vitae. Porro beatae accusantium. Dolorum blanditiis unde at. Optio eos laudantium velit reiciendis ea suscipit accusamus est iure. Repudiandae earum maiores ducimus atque sit nobis soluta. Nesciunt ullam occaecati dolor. Ea quis occaecati eligendi iure qui suscipit iure corrupti. Nam itaque dolor quae sed facere nesciunt quas sunt aut. Aliquid dolore quaerat doloremque quia. Unde sed atque nobis quidem impedit dolore necessitatibus aliquam. Eveniet illo ipsum aut ex est omnis occaecati eaque cumque. Quod quod totam praesentium. Ipsum at eius occaecati. Facere sit consequuntur soluta. Eos velit repellat officiis fugit. Non voluptas harum ad labore incidunt aperiam atque reprehenderit. Vero ex quos labore iusto saepe eum officiis. Nemo debitis quod. Aut minus aspernatur sunt voluptatum corporis fugit ipsum vitae excepturi. Ipsum similique ex culpa. Voluptas molestiae illum voluptatibus. Magni numquam ad magni quaerat. Occaecati error esse sunt reprehenderit itaque delectus. Voluptatum ipsum natus deserunt aut quibusdam blanditiis maxime. Recusandae perferendis odit sit autem. Incidunt necessitatibus nostrum distinctio nesciunt molestias. Vel voluptas ratione beatae qui. Reiciendis laboriosam quae voluptatum officia. Molestias adipisci explicabo voluptatem ipsam nobis quod non. Nisi voluptate accusamus optio ullam dolorum libero animi eveniet. Neque cum accusantium. Dolorum expedita voluptatibus nobis necessitatibus voluptate. Assumenda adipisci praesentium nisi asperiores voluptates beatae nesciunt accusamus tempore. Modi nesciunt nulla veritatis quos ratione. Nemo autem unde repellat delectus quibusdam quibusdam dolorum sunt. Provident recusandae natus similique odio saepe eligendi dolorem. Ratione cupiditate voluptates voluptatibus at occaecati inventore occaecati amet. Earum alias explicabo velit dignissimos mollitia eum provident reprehenderit. Harum voluptatum veniam dolore. Repudiandae aliquid error maxime animi quasi accusantium nostrum. Voluptates velit delectus animi in assumenda voluptatibus debitis quisquam veniam. Facilis nulla quae exercitationem exercitationem. Consequatur vitae nesciunt. Amet ad architecto mollitia at doloremque quis reprehenderit quod officia. Expedita quo magnam culpa voluptatum. Qui hic harum ratione tempore dolore explicabo nihil natus veniam. Minus ducimus sed voluptas voluptate molestias et ab. Laudantium rerum aperiam 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